清华 社 大 系 
网 络 开发 视频 大 讲堂 


移动 端 /PC 端 同步 学 习 ，QQ 群 / 微 信 群 随时 答疑 


速 查 、 高 效 、 实 用 ， 增 强 实战 能 力 。 


先 观摩 ， 再 临摹 ， 高 手 案头 常备 ， 随 时 查阅 提升 。 


随 用 随 取 ， 提 升 设计 效率 ， 快 速 进 阶 开发 高 手 行列 。 


JavaScript 
网 页 编程 


前 端 科技 QO 编著 


@ 教 学 微 视频 ( 361 节 ) @ 前 端 案例 资源 库 ( 4900 个 ) 
@ 拓 展 微 阅 读 ( 320 个 ) 人 @ 面 试题 库 ( 1036 道 ) 
@ 实 例 源 代码 ( 434 项 ) 全 网 页 模板 库 ( 1500 套 ) 


全 设计 素材 库 ( 12000 个 ) 


清华 大 学 出 版 社 


注 时 清 竺 社 “视频 大 计量 " 天 未 
网 络 和 开发 视频 大 请 党 


JavaScript 网 页 编程 从 入 门 到 精通 
( 微 课 精 编 版 ) 


前 端 科技 ”编著 


内 容 简介 


《JavaScript 网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版 )》 由 浅 入 深 、 通 俗 易 懂 地 讲解 了 网 页 制作 和 动态 网 站 建设 
的 相关 技术 及 实际 应 用 。 全 书 共 19 章 ， 包 括 JavaScript 基础 、JavaScript 基本 语法 、JavaScript 程序 结构 设计 、 使 
用 数组 、 使 用 字符 串 、 使 用 正则 表达 式 、 使 用 函数 、 函 数 式 编程 、 使 用 对 象 、 面 向 对 象 编程 、 BOM 操作 、DOM 
操作 、 事 件 操作 、CSS 操作 、JavaScript 通信 、JavaScript 数据 存储 、JavaScript 图 形 设计 、JavaScript 文件 操作 等 
内 容 。 本 书 在 编写 过 程 中 ,注意 理论 与 实践 相 结合 ， 通 过 大 量 的 实例 配合 讲解 各 知识 要 点 。 各 章节 注重 实例 间 的 
联系 和 各 功能 间 的 难 易 层 次 ， 内 容 讲解 以 文字 描述 和 图 例 并 重 ， 力 求生 动易 懂 ， 并 对 软件 应 用 过 程 中 的 难点 、 重 
点 和 可 能 出 现 的 问题 给 予 详 细 讲解 和 提示 。 

除 纸 质 内 容 外 ， 本 书 还 配备 了 多 样 化 、 全 方位 的 学 习 资 源 ， 主 要 内 容 如 下 。 


回 ”361 节 同 步 教学 微 视频 回 15000 项 设计 素材 资源 
回 ”320 个 拓展 知识 微 阅读 回 4800 个 前 端 开发 案例 
回 623 个 实例 案例 分 析 回 ”48 本 权威 参考 学 习 手册 
回 ”434 项 源 代码 资源 回 1036 道 企业 面试 真题 


本 书 内 容 翔实 、 结 构 清晰 、 循 序 渐进 ， 基 础 知识 与 案例 实战 紧密 结合 ， 既 可 作为 JavaScript 初学 者 的 入 门 用 书 ， 
也 可 作为 高 等 院 校 网 页 设计 、 网 页 制作 、 网 站 建设 、Web 前 端 开发 等 专业 的 教学 用 书 或 相关 机 构 的 培训 教材 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 〈CIP) 数据 


JavaScript 网 页 编程 从 入 门 到 精通 : 微 课 精 编 版 /前 端 科技 编著 . 一 北京 ; 清华 大 学 出 版 社 ，2019 
(清华 社 “ 视 频 大 讲堂 ”大 系 网 络 开发 视频 大 讲堂 7 
ISBN 978-7-302-52042-9 


I. @J… II. @ 前 … 了 HQ@JAVA 语言 一 程序 设计 IV. TIP312.8 
中 国 版 本 图 书馆 CIP 数据 核 字 (2019) 第 009036 号 


责任 编辑 ;页 小 红 
封面 设计 : 李 志 伟 
版 式 设 计 : 文 森 时 代 
责任 校对 : 马 军令 
责任 印 制 : 


出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www. tup. com. cn, http://www.wqbook. com 
地 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮  ” 编 : 100084 
社 总 机 : 010-62770175 邮 ” 购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969，c-service@tup. tsinghua. edu. cn 
质量 反馈 : 010-62772015，zhiliang@tup. tsinghua. edu. cn 


印 装 者 : 

经 ” 销 : 全 国 新 华 书店 

开 ”本 : 203mmX260mm 印 ” 张 : 33.75 字 ” 数 : 1036 千 字 

版 ”次 : 2019 年 5 月 第 1 版 印 ”次 : 2019 年 5 月 第 1 次 印刷 
定 ” 价 : 89.80 元 


产品 编号 : 079148-01 


如 何 使 用 本 书 


本 书 提供 了 多 样 化 、 全 方位 的 学 习 资源 ， 帮 助 读者 轻松 掌握 JavaSeript 网 页 编程 技术 ， 从 小 白 快 
速成 长 为 前 端 开发 高 手 。 


JavaScript 2 
一 Re 
线 上 阅读 
纸 质 书 拓展 学 习 电子 书 


手机 端 +PC 端 ， 线 上 线 下 同步 学 习 
1. 获取 学 习 权 限 
学 习 本 书 前 ， 请 先 乔 开 图 书 封底 的 二 维 码 涂 层 ， 使 用 手术 


扫描 ， 即 可 获取 本 书 资源 的 学 3 
再 扫描 正文 章节 对 应 的 二 维 码 ， 可 以 观看 视频 讲解 ， 阅 读 线 上 资源 ， 全 程 易 懂 、 好 学 、 速 查 、 高 
实用 。 


副 开 涂 层 ,扫描 获取 学 习 权 限 


清华 社 窜 方 手 信 号 
国 站 3 回 


观看 本 书 视频 扫 我 有 惊喜 


2. 观看 视频 讲解 


对 于 初学 者 来 说 ， 精 彩 的 知识 讲解 和 透彻 的 实例 解析 能 够 引导 其 快速 入 门 ， 轻 松 理解 和 掌握 知识 


要 点 。 本 书 中 几乎 所 有 案例 都 录制 了 视频 ， 可 以 使 用 手机 在 线 观 看 ， 也 可 以 离线 观看 ， 还 可 以 推送 到 
计算 机 上 大 屏幕 观看 。 


_ [sse 网 页 编程 从 入 门 到 精通 ( 币 课 精 编 有) 


3. 拓展 线 上 阅读 


| 
| 一 本 书 的 厚度 有 限 ， 但 掌握 一 门 技术 却 需要 大 量 的 知识 积累 。 本 书 选择 了 那些 与 学 习 、 就 业 关 系 
久 | 紧密 的 核心 知识 点 印 在 书 中 ， 而 将 大 量 的 拓展 性 知识 放 在 云 盘 上 ， 读 者 扫描 “ 线 上 阅读 ”二 维 码 ， 即 
鲜 ”可 免费 阅读 数 百 页 的 前 端 开发 学 习 资料 ， 获 取 大 量 的 额外 知识 。 


| |[ 手机 加 二 


。 符号， 音信 程序 中 所 有 笠 瑟 的 一 个 表 
包 卫 而 有 的 地 符 事 、 下 二 便 ， 朗 量 各 
有 本 类 名 等 


| 
| 
| 4. 其 他 PC 端 资 源 下 载 方式 

| 除了 前 面 介绍 过 的 可 以 直接 将 视频 、 拓 展 阅 读 等 资源 推送 到 邮箱 之 外 ， 还 提供 了 如 下 几 种 PC 端 
| 

| 

| 

| 


| 资源 获取 方式 。 
| 登录 清华 大 学 出 版 社 官 方 网 站 (www.tup.com.cn)， 在 对 应 图 书页 面 下 查找 资源 的 下 载 方式 。 
申请 加 入 QQ 群 、 微 信和 群 ， 获 得 资源 的 下 载 方式 。 

| 扫描 图 书 封底 “ 文 泉 云 盘 ” 二 维 码 ， 获 得 资源 的 下 载 方式 。 

小 自学 习 电子 书 

| 
| 为 方便 读者 全 面 提升 ， 本 书 赠送 了 小 白 学 习 “JavaScript 基础 ”电子 书 。 内 容 精 挑 细 选 ， 希 望 成 
| 为 您 学 习 路 上 的 好 帮手 ， 关 键 时 刻 解 您 所 需 。 


JavaSeript 基础 


如 何 使 用 本 书 一 


从 小 白 到 高 手 的 昱 变 


谷歌 的 创始 入 拉 里 “ 佩 奇 说 过 ,如果 你 刻意 练习 某 件 事 超过 10000 个 小 时 ， 那 么 你 就 可 以 达到 世 | 
界 级 。 | Ap 
因此 ， 不 管 您 现在 是 怎样 的 前 端 开 发 小 白 ， 只 要 您 按 着 下 面 的 步骤 来 学 习 ， 假 以 时 日 ， 您 会 成 为 | 时 、 
令 自己 惊讶 的 技术 大 咖 。 

(1) 扎实 的 基础 知识 + 大 量 的 中 小 实例 训练 + 有 针对 性 地 做 一 些 综合 案例 。 

(2) 大 量 的 项 目 案例 观摩 学习、 操练， 塑造 一 定 的 项 目 思维 。 

(3) 善于 借用 他 山 之 石 ， 对 一 些 成 熟 的 开源 代码 、 设 计 素材 拿 来 就 用 ， 学 会 站 在 巨人 的 肩膀 上 。 

(4) 有 工夫 多 参阅 一 些 官方 权威 指南 ， 拓 展 自己 对 技术 的 理解 和 应 用 能 力 。 

(5) 最 为 重要 的 是 ， 多 与 同行 交流 ， 在 切磋 中 不 断 进步 。 

书本 厚度 有 限 ， 学 习 空间 无 限 。 纸 张 价格 有 限 ， 知 识 价值 无 限 。 希 望 本 书 能 帮 您 真正 收获 学 习 的 
乐趣 和 知识 。 最 后 ， 视 您 阅读 快乐 ! 


一 人 
用 


“网 络 开发 视频 大 讲堂 ”系列 从 书 于 2013 年 5 月 出 版 ， 因 其 编写 细腻 、 讲 解 透彻 、 实 用 易学 、 
配备 全 程 视频 等 ， 备 受 读者 欢迎 。 从 书 累计 销售 近 20 万 册 ， 其 中 ,，《HTML5+CSS3 从 入 门 到 精通 》 
累计 销售 10 万 册 。 同 时 ， 系 列 书 被 上 百 所 高 校 选 为 教学 参考 用 书 。 

本 次 改版 ， 在 继承 前 版 优点 的 基础 上 ， 进 一 步 对 图 书 内 容 进 行 了 优化 ， 选 择 面试 、 就 业 最 急需 的 
内 容 ， 重新 录制 了 视频 ， 同 时 增加 了 许多 当前 流行 的 前 端 技 术 ， 提供 了 “入 门 学 习 一 实例 应 用 一 项 目 
开发 一 能 力 测试 一 面试 ”等 各 个 阶段 的 海量 开发 资源 库 ， 实 战 容量 更 大 ， 以 帮助 读者 快速 掌握 前 端 开 
发 所 需要 的 核心 精髓 内 容 。 

JavaScript 是 目前 最 流行 的 编程 语言 之 一 ， 在 2018 年 12 月 Tiobe 编程 语言 排行 榜 中 位 居 第 7 位 ， 
IEEE 发 布 2018 年 度 编程 语言 排行 榜 位 居 第 8 位 .作为 一 种 轻型 的 .解释 型 的 程序 设计 语言 , JavaScript 
主要 应 用 于 Web 应 用 开发 ， 它 以 脚本 的 形式 嵌入 网 页 文档 内 ， 由 客户 端 浏 览 器 负责 解析 和 执行 。 

JavaScript 语言 最 近 几 年 发 展 速度 比较 快 ， 也 非常 受 网 页 设计 人 员 欢 迎 。 它 的 优势 在 于 灵活 和 轻 
巧 ， 同 时 也 是 少数 几 种 能 够 兼顾 函数 式 编程 和 面向 对 象 编程 的 语言 。 本 书 将 系统 讲解 JavaScript 的 语 
言 特性 ， 帮 助 读者 完全 掌握 JavaScript 编程 技巧 。 


本 书 内 容 


了 路 


在 网 页 中 使 用 JavaScript 
JavaScript 基本 语法 


JavaScript 程序 结构 
使 用 数组 
使 用 字符 事 

使 用 正则 表达 式 


en 
面向 对 象 编程 
示意 图 、 流 程 图 、 效 果 图 


JavaScript 通信 
JavaScript JavaScript 数据 存储 

API JavaScript 图 形 设计 
JavaScript 文件 操作 


在 线 微 练习 


注意 、 提 示 、 说 明 
前 端 开发 资源 库 


设计 计算 器 
JavaScript 设计 日 历 

实战 设计 插件 
设计 游戏 


_ /sse 网 页 闹 程 从 入 门 到 精通 ( 稚 课 精 久 版) 


| 本 书 特点 
1 由浅 入 深 , 编排 合理 ， 实 用 易学 
鳞 | 本 书 系统 地 讲解 了 Javaseript 网 页 编程 技术 各 个 方面 的 知识 ， 循 序 渐进 ， 配 合 大 量 实例 ， 帮 助 读 
者 葛 定 坚实 的 理论 基础 ， 做 到 知 其 所 以 然 
2 跟着 案例 和 视频 学 ， 入 门 更 容易 


| 跟着 例子 学 习 ， 通 过 训练 提升 ， 是 初学 者 最 好 的 学 习 方式 。 本 书 案例 丰富 详尽 ， 共 600 多 个 ， 且 
| 都 附 有 详尽 的 代码 注释 及 清晰 的 视频 讲解 。 跟 着 这 些 案例 边 做 边 学 ， 可 以 避免 学 到 的 知识 流 于 表面 、 
| 限于 理论 ， 尽 情感 受 编程 带 来 的 快乐 和 成 就 感 。 

3. 丰富 的 线 上 资源 ， 多 元 化 学 习 体验 

| 为 了 传递 更 多 知识 ， 本 书 力求 突破 传统 纸 质 书 的 厚度 限制 。 本 书 提供 了 丰富 的 线 上 微 资源 ， 通 过 
| 手机 扫 码 , 读者 可 随时 观看 讲解 视频 ,拓展 阅读 相关 知识 ,全 程 便捷 、 高 效 , 感受 不 一 样 的 学 习 体 验 。 
| 4. 精彩 栏目 ， 易 错 点 、 重 点 、 难 点 贴心 提醒 

| 本 书 根据 初学 者 特点 ， 在 一 些 易 错 点 、 重 点 、 难 点 位 置 精心 设置 了 “注意 ”“ 提 示 ” 等 小 栏目 。 
| 通过 这 些小 栏目 ， 读 者 会 更 留心 相关 的 知识 点 和 概念 ， 绕 过 陷阱 ， 掌 握 很 多 应 用 技巧 。 


本 书 资源 


快速 字 所 前端 开 发 精 狂 
入 | 进 PSD 网 页 分 层 模板 (426 套 ) 
门 | 价 设计 素材 大 全 (17 类 ，10000 个 ) 


| 
| 网 页 配色 工具 箱 ( 600 个) 
| 网 页 模板 大 全 ( 632 套 ) 


拿 来 就 用 ， 提 升 速度 


网 页 设计 初级 示例 大 全 (49 例 ) 
网 页 应 用 分 类 案例 大 全 ( 1600 例 ) 

HTML5+CSS3+JavaScript 实用 案例 大 全 | 
(3200 例 ) 


专项 专 练 ， 身 经 百 战 


| 拓宽 限界 ， 提 天 内 功 
| 23 本 JavaScript 参考 手册 
| 1 本 Photoshop 学 习 手 册 


HTML、CSS 面试 题 (351 题 ) 
JavaScript 面试 题 ( 685 题 ) 
前 端 开发 /设计 面试 经 验 


| 具备 一 定 计算 机 操作 基础 的 初学 者 。 
| 加 ”具有 一 定 网 站 开发 经 验 的 初 、 中 级 用 户 。 
| 立志 从 事 网 站 开发 工作 的 从 业 人 员 。 


VI: 


前 言 $9 
网 页 设计 或 网 站 开发 的 大 中 专 学 生 。 
各 类 网 站 站 长 。 
本 书 也 可 以 作为 各 大 中 专 院 校 相关 专业 的 教学 辅导 和 参考 用 书 ， 或 作为 相关 培训 机 构 的 培 
训 教材 。 


读 前 须知 
本 书 提供 了 大 量 示例 ， 需 要 用 到 下 、Firefox、Chrome 等 主流 浏览 器 进行 测试 或 预览 ， 同 时 后 面 


办 办 办 


部 分 章节 还 要 用 到 PHP 测试 环境 。 因此， 为 了 测试 示例 或 代码 ， 读 者 需要 安装 人 下、Firefox、Chrome | 


等 浏览 器 ， 并 根据 书 中 详细 介绍 安装 PHP 测试 环境 。 

限于 篇 幅 ， 本 书 示例 没有 提供 完整 的 代码 ， 读 者 根据 学 习 需 要 补充 完整 的 HTML 结构 ， 在 网 页 
中 输入 <script> 标 签 ， 再 把 书 中 列举 的 JavaScript 示例 代码 写 在 <scripf> 标 签 内 ， 最 后 在 Web 浏览 器 中 
浏览 该 示例 页 面 ， 以 验证 代码 运行 效果 。 或 者 直接 参考 本 书 提供 的 示例 源 代 码 ， 边 学 边 练 。 


读者 服务 
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12.10.3 使 用 JSONP 异步 通信 . 
12.10.4 访问 DOM 集合 .……. 
这 305 沪 习 入 村 守 类 se 
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12.2.2 节点 名 称 和 值 . 
12.2.3 节点 树 .… 


12.3.2 ”访问 文档 信息 .………… 
12.3.3 访问 文档 元 素 . 
12.3.4 访问 文档 集合 . 
12.3.5 使 用 HIML5Document.. 


13.1 事件 基础 
13.1.1 JavaScript 事件 发 展 历史 
13.1.2 事件 模型 
13.1.3 事件 传播 
13.1.4 事件 类 型 


12.4.4 复制 节点 
12.4.5 插入 节点 
12.4.6 删除 节点 


13.1.5 绑 定 事件 . 
13.1.6 事件 监听 函数 . 
13.1.7 注册 事件 . 
13.1.8 销毁 事件 . 
13.1.9 event 对 象 
13.1.10 事件 委托 
13.2” 自 定义 事件 
13.2.1 设计 弹出 对 话 框 . 


13.2.2 设计 遮 掉 层 . 

13.2.3 自 定 义 事件 . .369 
13.2.4 设计 事件 触发 模型 . .370 
13.2.5 应 用 事件 模型 . | 


13.3 ”鼠标 事件 
13.3.1 click 和 dblclick .375 
13.3.2 mouseup、mousedown 和 

InoUsSemnOVe 
13.3.3 Imouseover 和 mouseenter 
13.3.4 mouseout 和 mouseleave. 


13.3.5 contextmenu 
13.4 ”MouseEvent 对 象 
13.4.1 altKey、ctrIKey、metaKey 和 


13.4.2 button 和 buttons .pe 
13.4.3 clientX、 clientY、movementX、 
movementY、screenX 和 


13.4.4 

入 让 ss .376 
和 376 
13.6 ”键盘 事件 376 


13.6.1 altKey、ctrIKey、metaKey 和 


13.6.3 小结.… 
13.7 进度 事件 . 
13.8” 拖 忠 事件 . 

13.8.1 事件 种 类 .………………. 

13.8.2 ”DataTransfer 对 象 概 

13.8.3 DataTransfer 对 象 的 属性 

13.8.4 DataTransfer 对 象 的 方法 
13.9 触摸 事件 

13.9.1 Touch 对象. 
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13.9.2 ”TouchList 对 象 . 
13.9.3 TouchEvent 对 象 
13.9.4 触摸 事件 的 种 类 
13.10 表单 事件 
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13.10.1 .378 
13.10.2 .378 
13.10.3 .378 
13.10.4 .378 
13.10.5 .378 
= 378 
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13.113 
TM 
13.11.5 hashchange 和 popstate 
13.11.6 cut, copy 和 paste..................379 
13.11.7 focus、blur、focusin 和 
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14.1 CSS 脚本 基础 … 
14.1.1 访问 行内 样式 
14.1.2 使 用 Style.…… 
14.1.3 使 用 styleSheets. 
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14.1.6 添加 样式 …… 
14.1.7 访问 泻 染 样式 
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14.2.4 元 素 尺寸 
14.2.5 视图 尺寸 .… 
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14.3 CSS 位 置 .… 
14.3.1 窗口 位 置 
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14.3.6 
14.3.7 
14.3.8 
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14.4 CSS 
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14.5.1 
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14.5.3 
14.5.4 


显示 
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| 14.5 CSS 动画 
| 
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定位 位 置 
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设置 相对 位 置 . 
息 标 指针 绝对 位 置 . 
和 鼠标 指针 相对 位 置 . 
滚动 条 位 置 
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使 用 定时 器 
使 用 requestAnimationFrame 


名 x_ 视 频 讲解 : 1 小 时 21 分 钟 


| 

| 15.1.1 
| 15.1.2 
15.13 
15.1.4 
15.1.5 
15.1.6 
15.1.7 
15.1.8 
15.1.9 
15.1.10 
15.1.11 
15.1.12 
15.1.13 


15.2.1 
152.2 
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15.2 XMLHttpRequest2.0 基础 
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建立 XMLHttpRequest 连接 
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获取 JavaScript 脚本 
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获取 纯 文本 ..…. 
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请 求 时 限 .…………… 
FomData 数据 对 象 


响应 不 同类 型 数据 . 
接收 二 进 制 数 据 .… 
监测 数据 传输 进度 . 


接收 ArrayBuffer 对 象 ….....……….….… 


1 
15.3.3 
15.3.4 
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15.3.6 
15.3.7 
15.3.8 ”设计 文件 上 传 进度 条 . 
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15.5 WebSockets 通信 .. 
15.5.1 WebSocket 基础 . 
15.5.2 使 用 WebSocketsAPI.. 
15.5.3 在 PHP 中 建立 socket 
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案例 : 发 送 JSON 对 象 . 
案例 : 使 用 Workerman 框架 
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写 入 cookie 信息 
读 取 cookie 信息 .…… 
修改 和 删除 cookie 信息 
附加 cookie 信息 
Http-Only Cookie 
封装 cookie 操作 
案例 实战 …… 
WebStorage 
16.2.1 使 用 WebStorage 
16.2.2 案例: 设计 登录 页 . 
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16.3.1 使 用 WebSQLDatabase .. 
16.3.2 案例 : 设计 登录 页 . 
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17.10.1 设计 基本 动 
17.10.2 
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重 命名 目录 .… 
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JavaScript 基础 


JavaScript 是 基于 对 象 的 编程 语言 ， 并 获得 了 所 有 现代 浏览 器 的 支持 ， 是 目前 应 用 最 广 
泛 的 语言 之 一 ， 也 是 网 页 设计 和 Web 开发 必须 掌握 的 基本 工具 。 本 章 将 简单 介绍 JavaScript 


的 基本 概念 、 发 展 历史 以 及 相关 概念 和 知识 


【 学 习 重 点 】 

WI 了 解 JavaScript 发 展 历史 

MH 了 解 ECMAScript 

MW 了解 如 何 编写 JavaScript 脚本 
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1.1 JavaScript 概述 


本 节 简 单 介绍 一 下 什么 是 JavaScript， 以 及 学 习 JavaScript 的 重要 性 。 
1.1.1 什么 是 JavaScript 


JavaScript 是 一 种 轻 量 级 的 脚本 语言 。 所 谓 “ 脚 本 语言 ” 就 是 它 不 具备 开发 操作 系统 的 能 力 ， 
只 用 来 编写 控制 其 他 大 型 应 用 程序 的 “脚本 ”。 

JavaScript 是 一 种 嵌入 式 语言 。 提 供 的 核心 语法 不 算 很 多 ， 只 能 用 来 做 一 些 数学 和 人 迪 辑 运算 。 
JavaScript 本 身 不 提供 任何 与 WO 输入 /输出 ) 相关 的 API， 需 要 依靠 宿主 环境 (host) 提供 ， 所 以 
JavaScript 只 适合 嵌入 更 大 型 的 应 用 程序 环境 ， 去 调用 宿主 环境 提供 的 底层 API。 

目前 ， 已 经 嵌入 JavaScript 的 宿主 环境 有 多 种 ， 最 常见 的 环境 就 是 浏览 器 ， 另 外 还 有 服务 器 环 
境 ， 即 Node 项 目 。 

从 语法 角度 看 ，JavaScript 语言 是 一 种 “对 象 模型 ”语言 。 各 种 宿主 环境 通过 这 个 模型 ， 描 述 自 
己 的 功能 和 操作 接口 ， 从 而 通过 JavaScript 控制 这 些 功能 。 但 是 ，JavaScript 并 不 是 纯粹 的 “面向 对 
象 语言 ”， 还 支持 其 他 编程 范式 ， 如 函数 式 编程 。 这 导致 对 于 同一 个 问题 ，JavaScript 会 有 多 种 解决 
方法 ，JavaScript 的 用 法 非常 灵活 。 

JavaScript 的 核心 语法 相当 精简 ， 只 包括 两 个 部 分 : 一 部 分 是 基本 的 语法 构造 ， 如 操作 符 、 控 制 
结构 、 语 句 ， 另 一 部 分 是 标准 库 ， 就 是 一 系列 具有 各 种 功能 的 对 象 ， 如 Array、Date、Math 等 。 除 此 
之 外 ， 各 种 宿主 环境 提供 额外 的 API， 即 只 能 在 该 环境 使 用 的 接口 ， 以 便 JavaScript 调用 。 例 如 ， 
在 浏览 器 环境 中 ， 它 提供 的 额外 API 可 以 分 成 三 大 类 。 

浏览 器 控制 类 : 操作 浏览 器 。 

DOM 类 : 操作 网 页 元 素 和 内 容 。 

Web 应 用 类 : 实现 互联 网 的 各 种 拓展 应 用 功能 。 

如 果 宿 主 环境 是 服务 器 ， 则 会 提供 各 种 操作 系统 的 API， 如 文件 操作 API、 网 络 通信 API 等 。 
这 些 都 可 以 在 Node 环境 中 找到 。 


< 仙 注意 : 本 书 主要 介绍 JavaSeript 核心 语法 和 浏览 器 网 页 开发 的 基本 知识 ， 不 涉及 服务 器 端 Node 
开发 。 


1.1.2 为 什么 学 习 JavaScript 


| “JavaScript 是 一 门 后 起 之 秀 的 高 级 语言 ， 混 搭 了 各 种 低级 语言 的 优秀 特性 ， 非 常 值得 学 习 。 它 既 
| 适合 作为 学 习 编程 的 入 门 语言 ， 也 适合 作为 日 常 开 发 的 工作 语言 。 它 是 目前 最 有 和 希望、 前途 最 光明 的 
计算 机 语言 之 一 。 

1. 操控 浏览 器 的 能 力 

JavaSeript 的 诞生 ， 就 是 作为 浏览 器 的 内 置 脚本 语言 ， 为 网 页 开发 者 提供 操控 浏览 器 的 能 力 。 它 
| 是 目前 唯一 通用 的 浏览 器 脚本 语言 ,所 有 浏览 器 都 支持 。 它 可 以 让 网 页 呈现 各 种 特殊 效果 ， 为 用 户 提 
| 供 良好 的 互动 体验 。 
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目前 , 全 世界 几乎 所 有 网 页 都 使 用 JavaScript。 如 果 不 用 , 网 站 的 易 用 性 和 使 用 效率 将 大 打折 扣 ， 
无 法 成 为 操作 便利 、 对 用 户 友好 的 网 站 。 

对 于 一 个 互联 网 开发 者 来 说 ， 如 果 想 提供 漂亮 的 网 页 、 令 用 户 满意 的 上 网 体验 、 各 种 基于 浏览 器 | 
的 便捷 功能 、 前 后 端 之 间 紧密 高 效 的 联系 ，JavaScript 是 必 不 可 少 的 工具 。 | 

2. 广泛 的 使 用 领域 

近年 来 ，JavaScript 的 使 用 范围 ， 慢 慢 超 越 了 浏览 器 ， 正 在 向 通用 的 系统 语言 发 展 。 

(1) 浏览 器 的 平台 化 。 

随 着 HTMLS 的 出 现 ， 浏 览 器 本 身 的 功能 越 来 越 强 ， 不 再 仅仅 能 浏览 网 页 ， 而 是 越 来 越 像 一 个 
平台 , JavaScript 因此 得 以 调用 许多 系统 功能 , 如 操作 本 地 文件 、 操作 图 片 、 调 用 摄像 关 和 麦克 风 等 。 
这 使 得 JavaScript 可 以 完成 许多 以 前 无 法 想象 的 事情 。 

(2) Node。 

Node 项 目 使 得 JavaScript 可 以 用 于 开发 服务 器 端的 大 型 项 目 , 网 站 的 前 后 端 都 用 JavaScript 开 | 
发 已 经 成 为 现实 。 有 些 嵌 入 式 平台 (Raspberry Pi) 能 够 安装 Node， 于 是 JavaScript 就 能 为 这 些 平台 
开发 应 用 程序 。 

(3) 数据 库 操作 。 

JavaScript 甚至 也 可 以 用 来 操作 数据 库 。NoSQL 数据 库 这 个 概念 , 本 身 就 是 在 JSON (JavaScript | 
Object Notation, JavaScript 对 象 表示 法 ) 格 式 的 基础 上 诞生 的 , 大 部 分 NoSQL 数据 库 允 许 JavaScript 
直接 操作 。 基 于 SQL 语言 的 开源 数据 库 PostgreSQL 支持 JavaScript 作为 操作 语言 ， 可 以 部 分 取代 
SQL 查询 语言 。 

(4) 跨 移动 平台 。 

JavaScript 也 正在 成 为 手机 应 用 的 开发 语言 。 一 般 来 说 ， 安 卓 平台 使 用 Java 语言 开发 ，iOS 平 
台 使 用 Objective-C 或 Swift 语言 开发 。 许 多 人 正在 努力 ， 让 JavaScript 成 为 各 个 平台 的 通用 开发 
语言 。 

PhoneGap 项 目 就 是 将 JavaScript 和 HTML5 打包 在 一 个 容器 之 中 ， 使 得 它 能 同时 在 iOS 和 安 | 
卓 上 运行 。Facebook 公司 的 React Native 项 目 则 是 将 JavaScript 写 的 组 件 ， 编 译 成 原生 组 件 ， 从 而 
使 它们 具备 优秀 的 性 能 。 

Mozilla 基金 会 的 手机 操作 系统 Firefox OS， 更 是 直接 将 JavaScript 作为 操作 系统 的 平台 语言 。 

(5) 内 嵌 脚 本 语言 。 

越 来 越 多 的 应 用 程序 ， 将 JavaScript 作为 内 嵌 的 脚本 语言 ， 如 Adobe 公司 的 著名 PDF 阅读 器 | 

Acrobat、Linux 桌面 环境 GNOME 3。 
(6) 跨 平 台 的 桌面 应 用 程序 。 

Chromium OS、Windows 8 等 操作 系统 直接 支持 JavaScript 编写 应 用 程序 Mozilla 的 Open Web 
Apps 项 目 、Google 的 Chrome App 项 目 、Github 的 Electron 项 目 以 及 TideSDK 项 目 ， 都 可 以 用 
来 编写 运行 于 Windows、Mac OS 和 Android 等 多 个 桌面 平台 的 程序 ， 不 依赖 浏览 器 。 

可 以 预期 ，JavaScript 最 终 将 能 让 你 只 用 一 种 语言 ， 就 开发 出 适应 不 同 平台 〈 包 括 桌面 端 、 服 务 
器 端 、 手 机 端 ) 的 程序 。 早 在 2013 年 9 月 的 统计 之 中 ，JavaScript 就 是 当年 Github 上 使 用 量 排名 第 
一 的 语言 。 著 名 程序 员 Jeff Atwood 甚至 提出 :“ 所 有 可 以 用 JavaScript 编写 的 程序 ， 最 终 都 会 出 现 
JavaScript 的 版 本 。” 


3. 易学 性 
相 比 学 习 其 他 语言 ， 学 习 JavaScript 有 一 些 有 利 条 件 。 
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(1) 学 习 环 境 无 处 不 在 。 

只 要 有 浏览 器 ， 就 能 运行 JavaScript 程序 ， 只 要 有 文本 编辑 器 ， 就 能 编写 JavaScript 程序 。 这 意 
味 着 ， 几 乎 所 有 电脑 都 原生 提供 JavaScript 学 习 环境 ， 不 用 另行 安装 复杂 的 IDE〈 集 成 开发 环境 ) 和 
编译 器 。 

(2) 简单 性 。 

相 比 其 他 脚本 语言 (如 Python 或 Ruby)，JavaScript 的 语法 相对 简单 一 些 ， 本 身 的 语法 特性 并 
不 是 特别 多 。 而 且 ， 那 些 语法 中 的 复杂 部 分 ， 也 不 是 必须 要 学 会 。 你 完全 可 以 只 用 简单 命令 ， 完 成 大 
部 分 的 操作 。 

(3) 与 主流 语言 的 相似 性 。 

JavaScript 的 语法 很 类 似 C/C++ 和 Java， 如 果 学 过 这 些 语言 ，JavaScript 的 入 门 会 非常 容易 。 
必须 说 明 的 是 ， 虽 然 核 心 语法 不 难 ， 但 是 JavaScript 的 复杂 性 体现 在 另外 两 个 方面 。 

首先 ， 它 涉及 大 量 的 外 部 API。JavaScript 要 发 挥 作用 ， 必 须 与 其 他 组 件 配合 ， 这 些 外 部 组 件 五 
花 八 门 ， 数 量 极其 庞大 ， 几 乎 涉及 网 络 应 用 的 各 个 方面 ， 掌 握 它们 绝 非 易 事 。 

其 次 ，JavaScript 语言 有 一 些 设计 缺陷 。 某 些 地 方 相当 不 合理 ， 另 一 些 地 方 则 会 出 现 怪 异 的 运行 
结果 。 学 习 JavaScript 很 大 一 部 分 时 间 是 用 来 搞 清楚 哪些 地 方 有 陷阱 。 

Douglas Crockford 写 过 一 本 有 名 的 书 :《JavaScript: The Good Parts》, 言 下 之 意 就 是 这 门 语言 不 好 
的 地 方 很 多 ， 必 须 写 一 本 书 才能 讲 清楚 。 另 外 一 些 程序 员 则 感到 ， 为 了 更 合理 地 编写 JavaScript 程 
序 ， 就 不 能 用 JavaScript 来 写 ， 而 必须 发 明 新 的 语言 ， 如 CoffeeScript、TypeScript、Dart 这 些 新 语 
言 的 发 明 目 的 ， 多 多 少 少 都 有 这 个 因素 。 

尽管 如 此 ， 目 前 看 来 ，JavaScript 的 地 位 还 是 无 法 动摇 的 。 加 之 ， 语 言 标准 的 快速 进化 ， 使 得 
JavaScript 功能 日 益 增强 ， 而 语法 缺陷 和 怪异 之 处 得 到 了 弥补 。 所 以 ，JavaScript 还 是 值得 学 习 ， 况 
且 它 的 入 门 真 的 不 难 。 

4. 强大 的 性 能 


JavaScript 的 性 能 优势 体现 在 以 下 方面 。 

(1) 灵活 的 语法 ， 表 达 力 强 。 

JavaScript 既 支持 类 似 C 语言 清晰 的 过 程式 编程 ， 也 支持 灵活 的 函数 式 编程 。 可 以 用 来 写 并 发 
处 理 。 这 些 语 法 特性 已 经 被 证 明 非 常 强大 ， 可 以 用 于 许多 场合 ， 尤 其 适用 异步 编程 。 

JavaScript 的 所 有 值 都 是 对 象 ， 这 为 程序 员 提 供 了 灵活 性 和 便利 性 。 因 为 可 以 很 方便 地 、 按 照 需 
要 随时 创造 数据 结构 ， 不 用 进行 麻烦 的 预定 义 。 

JavaScript 的 标准 还 在 快速 进化 中 ， 并 不 断 合 理化 以 及 添加 更 适用 的 语法 特性 。 

(2) 支持 编译 运行 。 

JavaScript 语言 本 身 ， 虽 然 是 一 种 解释 型 语言 ， 但 是 在 现代 浏览 器 中 ，JavaScript 都 是 编译 后 运 
行 。 程 序 会 被 高 度 优化 ， 运 行 效率 接近 二 进 制程 序 。 而 且 ，JavaScript 引擎 正在 快速 发 展 ， 性 能 将 越 
来 越 好 。 

(3) 事件 驱动 和 非 阻 塞 式 设计 。 

JavaScript 程序 可 以 采用 事件 驱动 和 非 阻塞 式 设计 ， 在 服务 器 端 适合 高 并 发 环境 ， 普 通 的 硬件 就 
可 以 承受 很 大 的 访问 量 。 

回 开放 性 。 

JavaScript 是 一 种 开放 的 语言 。 它 的 标准 ECMA-262 是 ISO 国际 标准 ， 写 得 非常 详尽 明确 ; 该 
标准 的 主要 实现 (如 V8 和 SpiderMonkey 引擎 ) 都 是 开放 的 ， 而 且 质 量 很 高 。 这 保证 了 这 门 语言 
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不 属于 任何 公司 或 个 人 ， 不 存在 版 权 和 专利 的 问题 。 
语言 标准 由 TC39 委员 会 负责 制定 ， 该 委员 会 的 运作 是 透明 的 ， 所 有 讨论 都 是 开放 的 ， 会 议 记 
录 都 会 对 外 公布 。 
不 同 公司 的 JavaScript 运行 环境 ， 兼 容 性 很 好 ， 程 序 不 做 调整 或 只 做 很 小 的 调整 ， 就 能 在 所 有 | 
浏览 器 上 运行 。 | 
社区 支持 和 就 业 机 会 。 
全 世界 程序 员 都 在 使 用 JavaScript， 它 有 着 极 大 的 社区 、 广 泛 的 文献 和 图 书 、 丰 富 的 代码 资源 。 | 
绝 大 部 分 需要 用 到 的 功能 ， 都 有 多 个 开源 函数 库 可 供 选 用 。 | 
作为 项 目 负责 人 ， 不 难 招聘 到 数量 众多 的 JavaSeript 程序 员 ;， 作为 开发 者 ， 也 不 难 找到 一 份 | 
JavaScript 的 工作 。 | 
| 


1.2 JavaScript 历史 和 版 本 


JavaScript 因为 互联 网 而 生 ， 紧 随 着 浏览 器 的 出 现 而 问世 。 回 顾 它 的 历史 ， 就 要 从 浏览 器 的 历史 
讲 起 。 


1.2.1 JavaScript 早期 历史 


1995 年 2 月 Netscape 公司 发 布 Netscape Navigator 2 浏览 器 ， 并 开发 了 一 种 名 为 LiveScript 的 脚 
本 语言 ,为 了 搭 上 媒体 热 炒 Java 的 顺风 车 ,临时 把 LiveScript 改 名 为 JavaScript, 这 也 是 最 初 的 JavaScript 
1.0 版 本 。 

由 于 JavaScript 1.0 获得 了 巨大 成 功 ，Netscape 随即 在 Netscape Navigator 3 中 又 发 布 了 JavaScript 
1.1 版 本 。 

在 Netscape Navigator 3 发 布 后 不 久 ， 微 软 在 Internet Explorer 3 中 加 入 JavaScript 脚本 语言 ， 为 了 
避 开 与 Netscape 的 JavaScript 纠纷 ， 命 名 为 JScript。 

1997 年 ， 欧 洲 计 算 机 制造 商 协会 (ECMA) 以 JavaScript 1.1 为 蓝本 制订 了 ECMA-262 的 新 脚本 
语言 的 标准 ， 并 命名 为 ECMAScript。 

1998 年 ， 国 标 标 准 化 组 织 和 国际 电工 委员 会 (ISOTEC) 也 采用 了 ECMAScript 作为 标准 〈 即 
ISO/TEC-16262)。 自 此 以 后 ， 浏 览 器 开发 商 就 开始 致力 于 将 ECMAScript 作为 各 自 JavaScript 实现 的 
参考 标准 。 


在 微软 推出 JavaScript 实现 之 后 , 市 场 上 存在 着 3 个 不 同 的 JavaScript 版 本 ， 
感 兴趣 的 读者 ， 可 以 扫 码 了 解 JavaScript 初期 不 同 实现 的 版 本 演绎 。 


1.2.2 ECMAScript 与 JavaScript 的 关系 


1997 年 ，ECMA 发 布 262 号 标准 文件 (ECMA-262) 的 第 一 版 ， 规 定 了 浏览 器 脚本 语言 的 标准 ， 
并 将 这 种 语言 命名 为 ECMAScript， 这 个 版 本 就 是 ECMAScript 1.0 版 。 之 所 以 不 叫 JavaScript， 有 两 | 
个 原因 : 

一 是 商标 , Java 是 Sun 公司 的 商标 , 根据 授权 协议 , 只 有 Netscape 公司 可 以 合法 地 使 用 JavaScript 
这 个 名 字 ， 且 JavaScript 本 身 也 已 经 被 Netscape 公司 注册 为 商标 。 
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二 是 体现 这 门 语言 的 制定 者 是 ECMA, 而 不 是 Netscape, 这 样 有 利于 保证 这 门 语言 的 开放 性 和 中 
立 性 。 

因此 , ECMAScript 和 JavaScript 的 关系 是 : ECMAScript 是 JavaScript 语言 的 国际 标准 , JavaScript 
是 ECMAScript 的 一 种 实现 。 

但 是 在 一 般 场合 中 ， 这 两 个 词 可 以 互 换 。 


1.2.3 ECMAScript 历史 


1998 年 6 月 ，ECMAScript 2.0 版 发 布 。 

1999 年 12 月 ，ECMAScript 3.0 版 发 布 ， 成 为 JavaScript 的 通行 标准 ， 得 到 了 广泛 支持 。 

2007 年 10 月 ，ECMAScript 4.0 版 草案 发 布 ， 对 3.0 版 做 了 大 幅 升 级 。 由 于 4.0 版 的 目标 过 于 激 
进 ， 各 方 对 于 是 否 通过 这 个 标准 ， 发 生 了 严重 分 歧 。 

2008 年 7 月 ，ECMA 中 止 ECMAScript 4.0 的 开发 ， 将 其 中 涉及 现 有 功能 改善 的 一 小 部 分 ， 发 布 
为 ECMAScript 3.1。 不 久 ，ECMAScript 3.1 改名 为 ECMAScript 5。 

2009 年 12 月 ，ECMAScript 5.0 版 正式 发 布 。 

2011 年 6 月 ，ECMAScript 5.1 版 发 布 ， 并 且 成 为 ISO 国际 标准 ISO/TEC 16262:2011)。 

2013 年 12 月 ，ECMAScript 6 草案 发 布 。 

2015 年 6 月，ECMAScript 6 发 布 正式 版 本 ， 并 更 名 为 ECMAScript 2015。Mozilla 将 在 这 个 标准 
的 基础 上 ， 推 出 JavaScript 2.0。 从 此 以 后 ，JavaScript 将 以 年 份 命名 ， 新 版 本 将 按照 “ECMAScript+ 
年 份 ”的 形式 发 布 ， 以 便 更 频繁 地 发 布 包含 小 规模 增 量 更 新 的 新 版 本 。 


1.2.4 ECMAScript 与 浏览 器 的 兼容 


ECMAScript 5.1 (或 ECMAScript 5) 是 ECMAScript 标准 最 新 修正 。 与 HTML5 规范 进程 本 质 类 
似 ，ECMAScript 5 通过 对 现 有 JavaScript 方法 添加 语句 和 原生 ECMAScript 对 象 做 合并 实现 标准 化 。 
ECMAScript 5 还 引入 了 一 个 语法 的 严格 变种 ， 被 称 为 严格 模式 〈Strict Mode)。 

ECMAScript 5 完整 列表 可 以 参考 ; 官方 ECMASecript 语言 规范 附录 D 和 E， 还 可 以 以 HTML 形 
式 查看 Michael[tm] Smith 非 官 方 的 HTML 版 本 说 明 (http://es5.github.io/)。 

随 着 Opera 11.60 的 发 布 ， 所 有 5 大 主流 浏览 器 都 支持 ECMAScript 5， 有 具体 信息 如 下 。 

Opera 11.60+。 

Internet Explorer 9+。 

Firefox 4+。 

Safari 5.1+。 

Chrome 13+。 


次 提示 : 正 9 不 支持 严格 模式 ， 从 IE 10 开始 添加 支持 严格 模式 ; Safari 5.1 仍 不 支持 Function. 
prototype. bind， 尽 管 Function.prototype.bind 已 经 被 Webkit 所 支持 。 


对 于 旧版 浏览 器 的 支持 信息 ， 可 以 查看 Juriy Zaytsev 的 ECMAScript 5 兼容 性 表 http://kangax. 
github.io/compat-table/es5/ )。 

ECMAScript 6 是 继 ECMAScript 5 之 后 的 一 次 主要 改进 , 语言 规范 由 ECMAScript 5.1 时 代 的 245 
页 扩充 至 600 页 。 ECMAScript 6 增添 了 许多 必要 的 特性 , 如 模块 和 类 , 以 及 一 些 实用 特性 , 如 Maps、 
Sets、Promises、 生 成 器 (Generators) 等 。 尽 管 ECMAScript 6 做 了 大 量 的 更 新 ， 但 是 它 依旧 完全 向 
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后 兼容 以 前 的 版 本 ， 标 准 化 委员 会 决定 避免 由 不 兼容 版 本 语言 导致 的 Web 体验 破碎 。 因 此 所 有 老 代 
码 都 可 以 正常 运行 ， 整 个 过 渡 也 显得 更 为 平滑 ， 但 随 之 而 来 的 问题 是 ， 开 发 者 们 抱 忽 了 多 年 的 老 问题 
依然 存在 。 


由 于 ECMAScript 6 还 没有 定案 , 有 些 语法 规则 还 会 变动 , 目前 支持 ECMAScript 6 的 软件 和 开发 | 


环境 还 不 多 。 各 大 浏览 器 的 最 新 版 本 ， 对 ECMAScript 6 的 支持 可 以 查看 http://kangax.github.io/ 
compat-table/es6/。 

JavaScript 语言 有 多 个 版 本 。 本 书 的 内 容 基 于 ECMAScript 5.1 版 本 ， 这 是 最 普遍 支持 的 版 本 ， 
也 是 学 习 JavaScript 的 基础 。 

【拓展 】 

关于 JavaScript 的 历史 ， 有 说 不 完 的 话题 , 讲 不 完 的 故事 , 但 是 作为 一 本 权威 、 
标准 化 教材 ， 我 们 要 考虑 版 面 的 限制 ， 也 要 顾虑 读者 们 的 实际 情况 。 为 此 ， 本 节 在 
线 再 提供 一 节 有 关 JavaScript 更 详尽 的 演化 历史 ， 部 分 叙述 可 能 与 本 节 内 容重 合 ， 
感 兴趣 的 读者 可 以 扫 码 阅读 。 


1.3 JavaScript 构成 


一 个 完整 的 JavaScript 实现 由 以 下 3 个 部 分 构成 。 
JavaScript 核心 (ECMAScript) 。 
文档 对 象 模型 (DOM) 。 

浏览 器 对 象 模型 (BOM) 。 


1.3.1 JavaScript 核心 


Web 浏 览 器 只 是 ECMAScript 实 现 的 宿主 环境 之 一 。 宿 主 环境 不 仅 提 供 基 本 的 ECMAScript 实 现 ， 

同时 也 会 提供 各 种 功能 扩展 。JavaScript 核心 规定 了 这 门 语言 的 下 列 组 成 部 分 : 

语法 。 

类 型 。 

语句 。 

关键 字 。 

保留 字 。 

操作 符 。 

对 象 。 


1.3.2 文档 对 象 模型 


文档 对 象 模型 (DOM，Document Object Model)， 是 W3C 组 织 推荐 的 处 理 HTML 或 XML 的 标 
准 编程 接口 ， 是 一 种 与 平台 和 语言 无 关 的 应 用 程序 接口 (API)。 可 以 动态 地 访问 程序 和 脚本 ， 更 新 其 
内 容 、 结 构 和 样式 。 文 档 可 以 进一步 被 处 理 ， 处 理 的 结果 可 以 加 入 到 当前 的 页 面 。DOM 是 一 种 基于 
树 的 API 文档 ， 它 要 求 在 处 理 过 程 中 整个 文档 都 表示 在 存储 器 中 。 

【示例 】 针 对 下 面 的 网 页 文档 结构 如 下 。 


图 回回 图 罗网 加 
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<title>Sample Page</title> 
</head> 


<p>hello world!</p> 
</body> 
</html> 


这 段 代 码 可 以 用 DOM 绘制 成 一 个 节点 层次 图 ， 如 图 1.1 所 示 。 


图 1.1 DOM 文档 节点 树 

通过 DOM 创建 的 文档 节点 树 形 图 ， 开 发 人 员 获 得 了 控制 页 面 内 容 和 结构 的 主动 权 。 借 助 DOM 
| 提供 的 API， 开 发 人 员 可 以 轻松 自如 地 删除 、 添 加 、 蔡 换 或 修改 任何 节点 。 

DOM 1 级 (DOM Level 1) 于 1998 年 10 月 成 为 W3C 的 推荐 标准 .DOM 1 级 由 以 下 两 个 模块 组 成 。 

回 DOM 核心 (DOM Core) 。 

DOM HTML。 

DOM 2 级 引入 了 下 列 新 模块 ， 也 给 出 了 众多 新 类 型 和 新 接口 的 定义 。 

DOM 视图 (DOM Mews) 。 

DOM 事件 (DOM Events) 。 

DOM 样式 (DOM Style) 。 

DOM 遍历 和 范围 (DOM Traversal and Range) 。 

DOM 3 级 则 进一步 扩展 了 DOM,， 引 入 了 以 统一 方式 加 载 和 保存 文档 的 方法 ， 新 增 了 验证 文档 的 
方法 。DOM 3 级 也 对 DOM 核心 进行 了 扩展 ， 开 始 支持 XML 1.0 规范 ， 涉 及 XML Infoset、XPath 和 
XML Base。 


从 提示 : 有 时 候 读者 会 听 到 DOM 0 级 标准 。 实 际 上 ，DOM 0 级 标准 不 存在 。 所谓 DOM 0 级 只 
是 对 DOM 标准 前 的 一 种 说 法 ， 具 体 表 示 IE 4.0 和 Netscape Navigator 4.0 最 初 支持 的 
DHTML . 


在 DOM 标准 出 现 了 一 段 时 间 之 后 ，Web 浏览 器 才 开始 实现 它 。 微 软 在 正 5 中 首次 尝试 实现 
DOM， 但 直到 IE 5.5 才 算是 真正 支持 DOM 1 级 。 在 随后 的 下 6 和 正 7 中 ， 微 软 都 没有 引入 新 的 


| DOM 功能 ， 而 到 了 IE 8 才 对 以 前 DOM 实现 中 的 bug 进行 了 修复 。 


Firefox 3 完全 支持 DOM 1 级 , 几乎 完全 支持 DOM 2 级 , 甚至 还 支持 DOM 3 级 的 一 部 分 。 目 前， 
支持 DOM 已 经 成 为 浏览 器 开发 商 的 首要 目标 , 主流 浏览 器 每 次 发 布 新 版 本 都 会 改进 对 DOM 的 支持 。 
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可 
【拓展 】 


除了 DOM 核心 和 DOM HTML 接口 之 外 ， 另 外 几 种 语言 还 发 布 了 只 针对 自己 的 DOM 标准 。 下 
面 列 出 的 语言 都 是 基于 XML 的 ,每 种 语言 的 DOM 标准 都 添加 了 与 特定 语言 相关 的 新 方法 和 新 接口 。 

SVG (Scalable Vector Graphic， 可 伸缩 矢量 图 ) 1.0 

MathML (Mathematical Markup Language， 数 学 标记 语言 ) 1.0 

SMIL (Synchronized Multimedia Integration Language， 同 步 多 媒体 集成 语言 

还 有 一 些 语 言 也 开发 了 自己 的 DOM 实现 ， 例 如 ，Mozilla 的 XUL (XML User Interface 
Language，XML 用 户 界面 语言 )。 但 是 ， 只 有 上 面 列 出 的 几 种 语言 是 W3C 的 推荐 标准 。 


1.3.3 浏览 器 对 象 模型 
正 3.0 和 Netscape Navigator 3.0 提供 了 一 种 特性 : BOM (浏览 器 对 象 模型 )， 可 以 对 浏览 器 窗口 


进行 访问 和 操作 。 使 用 BOM， 开 发 者 可 以 移动 窗口 、 改 变 状态 栏 中 的 文本 以 及 执行 其 他 与 页 面 内 容 | 


不 直接 相关 的 动作 。 与 DOM 不 同 ，BOM 只 是 JavaScript 的 一 个 部 分 ， 没 有 任何 相关 的 标准 。 
BOM 主要 处 理 浏览 器 窗口 和 框架 ， 不 过 通常 浏览 器 特定 的 JavaScript 扩展 都 被 看 作 BOM 的 

一 部 分 。 常 用 功能 包括 : 

弹出 浏览 器 窗口 。 

移动 、 关 闭 浏览 器 窗口 以 及 调整 窗口 大 小 。 

提供 Web 浏览 器 详细 信息 的 定位 对 象 。 

提供 用 户 屏幕 分 辨 率 详细 信息 的 屏幕 对 象 。 

对 cookie 的 支持 。 

下 扩展 了 BOM， 加 入 了 ActiveXObject 类 ， 可 以 通过 JavaScript 实例 化 ActiveX 对 象 。 
由 于 没有 相关 的 BOM 标准 ， 每 种 浏览 器 都 有 自己 的 BOM 实现 。 有 一 些 事实 上 的 标准 ， 如 具有 

一 个 窗口 对 象 和 一 个 导航 对 象 ， 不 过 每 种 浏览 器 可 以 为 这 些 对 象 或 其 他 对 象 定 义 自己 的 属性 和 方法 。 


办 办 办 办 


1.4 ”初次 使 用 JavaScript 


JavaScript 代码 只 有 嵌入 网 页 ， 才 能 在 用 户 浏 览 网 页 时 运行 。 在 网 页 中 嵌入 JavaScript 代码 主要 有 
以 下 4 种 方法 。 

<scrip 妃 标签: 代码 嵌入 网 页 。 

<scrip 人 标签， 加 载 外 部 脚本 。 

事件 属性 : 代码 写 入 HTML 标签 的 事件 处 理 属 性 中 ， 如 onclick 等 。 

URL 协议 : URL 支持 以 javascript: 协 议 的 方式 ， 执 行 JavaScript 代码 。 


最 后 两 种 方法 用 得 很 少 ， 常 用 的 是 前 两 种 方法 。 由 于 内 容 (HTML 代码 ) 和 行为 JavaScript 代 | 


码 》 应 该 分 离 ， 所 以 第 一 种 方法 应 当 谨慎 使 用 。 
1.4.1 编写 脚本 


下 面 通过 示例 演示 如 何 使 用 <script> 标 签 的 两 种 方式 : 直接 在 页 面 中 嵌入 JavaScript 代码 和 包含 外 
部 JavaScript 文件 。 
【示例 1】 直 接 在 页 面 中 嵌入 JavaScript 代码 。 操 作 步 又 如 下 。 
(1) 新 建 HTML 文档 ， 保 存 为 test.html。 然 后 在 <head> 标 签 内 插入 一 个 <script> 标 签 。 
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| (2) 为 <script> 标 签 指定 type 属性 值 为 "text/javascript"。 现 代 浏 览 器 默认 <scrip 人 标签 的 类 型 为 
| JavaScript 脚本 ， 因 此 省 略 type 属性 ， 依 然 能 够 被 正确 执行 ， 但 是 考虑 到 代码 的 兼容 性 ， 建 议定 义 该 
| 属性 。 

| 


| (3) 直接 在 <script> 标 签 内 部 输入 JavaScript 代码 如 下 。 
| <ldoctype html> 


mp 
<head> 
| <meta charset="utf-8"> 
<title>test</title> 
‘<script type="text/javascript"> 
function hiO { 
document.write("<h1>Hello, World!</h1>"):; 
} 
hiO; 
</script> 
| </head> 
| <body> 
| </body> 
| </html> 
| 
| 
| 


| 上 面 JavaScript 脚本 先 定 义 了 一 个 hiO 函 数 , 该 函数 被 调用 后 会 在 页 面 中 显示 字符 "Hello,.World! "。 
| document 表示 DOM 网 页 文档 对 象 ，document.write() 表 示 调 用 Document 对 象 的 write0 方 法 ， 在 当前 
| 网 页 源 代码 中 写 入 HIML 字符 串 "<h1>Hello,World!</h1>"。 
调用 hi0 函 数 ， 浏 览 器 将 在 页 面 中 显示 一 级 标题 字符 "Hello,World! "。 
(4) 保存 网 页 文档 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 1.2 所 示 。 


图 1.2 第 一 个 JavaScript 程序 


【示例 2】 包含 外 部 JavaScript 文件 。 操 作 步 又 如 下 。 
(1) 新 建文 本 文件 ， 保 存 为 testjs。 注 意 ， 扩 展 名 为 js， 它 表示 该 文本 文件 是 JavaScript 类 型 的 


| 
| 
| Hello,World! 
| 
| 
| 
| 


| 文件 


(2) 打开 testjs 文本 文件 ， 在 其 中 编写 下 面 代码 ， 定 义 简单 的 输出 函数 。 


| 

| 在 上 面 代码 中 ，alert0 表 示 Window 对 象 的 方法 ， 调 用 该 方法 将 弹出 一 个 提示 对 话 框 ， 显 示 参 数 
| 字符 串 "Hello,World'"。 

| (3) 保存 JavaScript 文件 ， 注 意 与 网 页 文件 的 位 置 关 系 。 这 里 保存 JavaScript 文件 位 置 与 调用 该 
| 文件 的 网 页 文件 位 于 相同 目录 下 。 


| (4) 新 建 HTML 文档， 保存 为 test1.html。 然 后 在 <head> 标 签 内 插入 一 个 <scrip 人 标签。 定义 src 
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属性 ， 设 置 属性 值 为 指向 外 部 JavaScript 文件 的 URL 字符 串 ， 代 码 如 下 所 示 。 
<Script type="text/javascript" src="test.js"></script> 
(5) 在 上 面 <scrip 伺 标签 下 一 行 继续 插入 一 个 <scrip 伺 标签， 直接 在 <script> 标 签 内 部 输入 | f 
JavaScript 代码 ， 调 用 外 部 JavaScript 文件 中 的 hi0 函 数 。 | 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>test</title> 

‘<script type="text/javascript" src="test.js"></script> 

‘<script type="text/javascript"> 

hiO; // 调用 外 部 JavaScript 文件 中 的 hiO 函 数 
</script> 

</head> | 
</body> | 
</html> | 


(6) 保存 网 页 文档 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 1.3 所 示 。 
< EE 


图 1.3 ”调用 外 部 函数 弹出 提示 对 话 框 


窟 提示 : 定义 sre 属性 的 <seripf> 标 签 不 应 再 包含 JavaSeript 代码 ， 如 果 岩 入 了 代码 ， 则 只 会 下 载 并 
执行 外 部 JavaScript 文件 ， 谋 入 代码 会 被 忽略 。 
<scrip 亿 标签 的 sre 属性 可 以 包含 来 自 外 部 域 的 JavaScript 文件 。 例 如 : 
<script type="text/javascript" src="http://www.sothersite.cony/test. js"></script> 
这 些 位 于 外 部 域 中 的 代码 也 会 被 加 载 和 解析 。 因 此 在 访问 自己 不 能 控制 的 服务 器 上 的 JavaScript 
文件 时 要 小 心 ， 防 止 恶意 代码 ， 或 者 防止 恶意 人 员 随 时 可 能 替换 JavaScript 文件 中 的 代码 。 
【补充 】 
HTML 为 <script> 共 定义 了 6 个 属性 ， 简 单 说 明 请 扫 码 了 解 。 
【拓展 】 
下 面 再 简单 介绍 另外 两 种 把 JavaScript 代码 嵌入 网 页 的 方法 。 
回 ”事件 属性 。 
加 ”URL 协议。 
详细 说 明 请 扫 码 了 解 。 
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Ce) 
~ 
eR 
| 14.2 脚本 位 置 
ee 
ds JavaScript 脚本 随 HTML 代码 一 起 会 被 浏览 器 加 载 , 并 按照 它们 在 HIML 中 出 现 的 先后 顺序 依次 


被 解析 。 如 果 没 有 设置 脚本 异步 加 载 或 延迟 执行 ， 则 当 <scrip 人 标签 中 的 代码 加 载 完 成 之 后 ， 会 被 理 


， 解 解析 。 
【示例 1】 在 默认 情况 下 ， 所 有 <script> 标 签 都 应 该 放 在 页 面 头 部 的 <head> 标 签 中 。 
| 


| <!doctype html> 
| <html> 
<head> 
| <meta charset="utf-8"> 
| <title>test</title> 
| ‘<script type="text/javascript" src="test.js"></script> 
<script type="text/javascript"> 
hi0: 
| </script> 
| </head> 
| <body> 
| <!-- 网 页 内 容 --> 
</body> 
<html> 


| 
| 【示例 2】 如 果 JavaScript 外 部 文件 比较 大 ， 则 可 以 考虑 把 JavaScript 引用 放 在 <body> 标 签 中 页 
| 面 的 内 容 后 面 。 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
</head> 
<body> 
<!-- 网 页 内 容 --> 
| <<title>test</title> 
| <script type="text/javascript" src="test.js"></script> 
| <script type="text/javascript"> 
hi0: 
</script> 
| /body> 
| </html> 
| <htm> 


这 样 JavaScript 代码 不 会 影响 浏览 器 对 HTML 文档 结构 的 解析 。 
码 阅读 。 


【拓展 】 
> a 下 面 简单 了 解 一 下 JavaScript 脚本 的 工作 原理 ， 感 兴趣 的 读者 可 以 扫 
| em 关于 加 载 外 部 脚本 文件 所 使 用 的 协议 ， 需 要 读者 注意 这 一 点 ， 具 体 
和 EN 时 ?说 明 请 扫 码 阅读 。 
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1.4.3 设置 延迟 执行 


<script> 标 签 的 defer 属性 能 够 迫使 脚本 被 延迟 到 整个 页 面 都 解析 完毕 后 再 运行 , 即 浏览 器 可 以 立即 | 祖师 该 和 
下 载 JavaScript 代码 ， 但 延迟 执行 。 | 国 
【示例 】 在 下 面 示例 中 ， 虽 然 把 <script> 标 签 放 在 文档 的 <head> 标 签 中 ， 但 其 中 包含 的 脚本 将 延 ， 

迟到 浏览 器 遇 到 </html> 标 签 后 再 执行 。 

<!doctype html> 

<html> 

<head> | 
<script type="text/javascript" defer sre="test1.js"></script> | 
<script type="text/javascript" defer src="test2.js"></script> ! 
</head> 


<body> 
<!-- 网 页 内 容 -> 
</body> 
</html> 


< 注意 : defer 属性 只 适用 于 外 部 脚本 文件 。 


1.4.4 设置 异步 响应 


与 defer 类 似 ，<scrip 人 > 标签 的 asyne 属性 也 可 以 让 浏览 器 立即 下 载 外 部 脚本 文件 ， 但 是 不 保证 它 
理解 执行 ， 允 许 浏览 器 在 恰当 的 时 间 异 步 执 行 代码 ， 同 时 也 不 保证 按照 先后 顺序 执行 。 

【示例 】 在 下 面 代码 中 ， 第 二 个 脚本 文件 test2js 可 能 会 在 第 一 个 脚本 文件 testljs 之 前 执行 。 因 
此 ， 用 户 要 确保 两 个 文件 之 间 没 有 风 辑 顺序 的 关联 ， 互 不 依赖 则 非常 重要 。 

<!doctype html> 

<html> 

<head> 

‘<script type="text/javascript" async src="test].js"></script> 

<script type="text/javascript" async src="test2.js"></script> 

</head> 


<body> 
<!-- 网 页 内 容 --> 


</body> 
</html> 
【拓展 】 
defer 属性 和 asynec 属性 的 功能 比较 相似 ， 很 多 情况 下 可 以 相互 换 用 ， 但 是 二 
者 的 作用 和 运行 流程 是 不 同 的 ， 具 体 比 较 请 扫 码 了 解 。 


1.4.5 在 XHTML 中 使 用 JavaScript 脚本 


XHTML (EXtensible HyperText Markup Language) 表示 可 扩展 超 文 本 标记 语言 ， 是 将 HTML 作 
为 XML 的 应 用 而 重新 定义 的 一 个 标准 . 编写 XHTML 代码 的 规则 要 比 编写 HTML 严格 得 多 , 而 且 直 


线 上 阅读 
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| 接 影 响 能 和 否 在 嵌入 JavaScript 代码 时 使 用 <script 放 标签 。 
考虑 到 HTMLS5 的 流行 ， 本 节 内 容 以 选修 内 容 呈 现 ， 感 兴趣 的 读者 请 扫 码 了 解 。 


1 .4.6 ”兼容 不 支持 JavaScript 的 浏览 器 


最 早 引入 <scripf> 标 签 时 ， 与 传统 HTML 的 解析 规则 存在 冲突 。 由 于 要 对 这 个 标签 应 用 特殊 的 解 
| 析 规 则 , 因此 在 那些 不 支持 JavaScript 的 浏览 器 中 就 会 导致 问题 ,， 即 会 把 <scripf> 标 签 的 内 容 直 接 输出 
| 到 页 面 中 ， 因 而 会 破坏 页 面 的 布局 和 外 观 。 

Netscape 与 Mosaic 协商 并 提出 了 一 个 解决 方案 , 让 不 支持 <scripf> 标 签 的 浏览 器 
E 够 隐藏 嵌入 的 JavaScript 代码 。 这 个 方案 就 是 把 JavaScript 代码 包含 在 一 个 HTML 
注释 中 。 
i 考虑 到 目前 所 有 浏览 器 都 支持 JavaScript， 本 节 内 容 以 外 围 知识 呈现 ， 供 怀旧 的 
| 线 上 阅读 ”读者 了 解 。 
1.4.7 ”比较 嵌入 代码 与 链接 脚本 


在 HIML 中 嵌入 JavaScript 代码 虽然 没有 问题 ， 但 一 般 认 为 最 好 的 做 法 还 是 尽 
可 能 使 用 外 部 文件 来 包含 JavaScript 代码 。 不 过 ， 并 不 存在 必须 使 用 外 部 文件 的 硬性 
规定 ， 但 是 还 是 建议 大 家 多 使 用 外 部 脚本 ， 具 体 优点 请 扫 码 了 解 。 


| 1.4.8 使 用 <noscript> 标 签 


早期 浏览 器 不 支持 JavaScript， 为 了 确保 页 面 平稳 兼容 ， 创 造 了 一 个 <noscript> 
标签 ， 用 以 在 不 支持 JavaScript 的 浏览 器 中 显示 替代 的 内 容 。 
和 本 考虑 到 目前 所 有 浏览 器 都 支持 JavaScript， 本 节 内 容 以 选修 内 容 呈 现 ， 感 兴趣 的 
线 上 阅读 ”读者 可 以 扫 码 阅读 。 


.4.9 ”脚本 的 动态 加 载 


国 虹 六 各 除了 静态 的 <script> 标 签 ， 还 可 以 动态 生成 <script> 标 签 ， 然 后 加 入 页 面 ， 从 而 实 
现 脚本 的 动态 加 载 。 由 于 本 节 内 容 对 于 初学 者 来 说 , 需要 一 定 的 知识 门槛 ， 故 把 它 作 
为 选 学 内 容 在 线 呈现 ， 感 兴趣 的 读者 可 以 扫 码 阅读 。 


1.5 JavaScript 解析 基础 


JavaScript 解析 过 程 包括 两 个 阶段 : 预 处 理 〈 也 称 编译 ) 和 执行 。 在 预 编 译 期 ，JavaScript 解释 器 
| 将 完成 对 JavaScript 代码 的 预 处 理 操作 ， 把 JavaScript 代码 转换 成 字 节 码 ; 在 执行 期 ，JavaScript 解释 
8 回 。 器 把 字 节 码 生成 二 进 制 机械 码 ， 并 按 顺序 执行 ， 完 成 程序 设计 的 任务 。 

由 于 这 些 知 识 对 于 初学 者 来 说 ， 比 较 艰 涩 ， 本 节 内 容 仅 作为 选 学 内 容 供 有 兴趣 、 
| Rh 有 余力 的 读者 可 扩展 阅读 。 阅 读 时 请 不 要 钻 牛角 尖 ， 了 解 即 可 ,因为 这 个 话题 实在 很 
| 各 上 册 读 烧 脑 ， 详 细 内 容 请 扫 码 。 
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1.6 浏览 器 与 JavaScript 


JavaScript 主要 寄生 于 Web 浏览 器 中 ， 学 习 JavaScript 语言 之 前 ， 应 该 先 了 解 
浏览 器 。 目 前 主流 浏览 器 包括 三 、FireFox、Opera、Safari 和 Chrome。 浏 览 器 的 核 
心包 括 两 部 分 : 泻 染 引擎 和 JavaScript 解释 器 (又 称 JavaScript 引擎 )。 

本 节 为 拓展 部 分 ， 方便 感 兴趣 的 读者 课余 涉猎 ， 不 作为 必 学 内 容 。 但 是 ， 还 
是 极力 推荐 每 位 初学 者 了 解 一 下 ， 详 细 内 容 请 扫 码 阅读 。 


1.7 JavaScript 开发 工具 


开发 JavaScript 程序 可 以 使 用 任何 一 种 文本 编辑 器 ， 当 然 使 用 集成 的 开发 环境 
能 够 提高 编码 效率 。 本 节 简单 介 绍 了 一 些 JavaScript 开发 工具 ， 以 及 JavaScript 测试 
和 调试 的 基本 方法 和 操作 技巧 ， 建 议 每 位 初学 者 了 解 一 下 ， 详 细 内 容 请 扫 码 阅读 。 


1.8 JavaScript 发 展 趋势 


JavaScript 伴随 着 互联 网 的 发 展 一 起 发 展 。 互 联网 周边 技术 的 快速 发 展 ， 刺 激 
和 推动 了 JavaScript 语言 的 发 展 。 

下 面 以 时 间 轴 简单 罗列 近 20 年 互联 网 新 技术 的 更 欠 ， 以 及 对 JavaScript 的 影 
响 ， 感 兴趣 的 读者 可 以 扫 码 阅读 。 
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JavaScript 基本 语法 


JavaScript 遵循 ECMA-262 标准 规范 ， 并 大 量 借鉴 C 语系 语法 将 征 。 目 前 ， 最 新 版 是 
ECMA-262 第 8 版 (ECMAScript 2017 )， 应 用 比较 广泛 的 是 ECMAScript 第 5 版 本 。 本 章 将 
根据 ECMAScript 规范 简单 介绍 JavaScript 的 基本 语法 


【 学 习 重 点 】 

MH 熟悉 JavaScript 基本 编码 规范 
正确 使 用 变量 

能 够 正确 检测 数据 类 型 

能 够 灵活 转换 数据 类 型 
正确 使 用 常用 运算 符 。 


总 总 吾 吾 


第 2 章 .JavaScript 基本 语法 


可 
2.1 编写 第 一 行 代码 


JavaScript 程序 的 执行 以 行 (Line) 为 单位 ， 即 一 行 一 行 地 执行 。 一 般 情 况 下 ， 每 一 行 就 是 一 句 | 
话语 句 )， 表 示 一 条 指令 。 
语句 〈Statement) 是 为 了 完成 某 种 任务 而 进行 的 操作 ， 例 如 ， 下 面 就 是 一 行 赋值 语句 。 


vara=1+3; 


这 条 语句 先 用 var 命令 ， 声 明了 变量 a， 然 后 将 1 + 3 的 运算 结果 赋值 给 变量 a。 

1+3 叫 作 表 达 式 (Expression)， 指 一 个 为 了 得 到 返回 值 的 计算 式 。 语 句 和 表达 式 的 区 别 在 于 ， 前 
者 主要 为 了 进行 某 种 操作 , 一 般 情况 下 不 需要 返回 值 ; 后 者 则 是 为 了 得 到 返回 值 , 一 定 会 返回 一 个 值 。 

凡是 JavaScript 语言 中 预期 为 值 的 地 方 ， 都 可 以 使 用 表达 式 。 例 如 ， 赋 值 语句 的 等 号 右边 ， 预 期 
是 一 个 值 ， 因 此 可 以 放置 各 种 表达 式 。 一 条 语句 可 以 包含 多 个 表达 式 。 

语句 以 分 号 结尾 ， 一 个 分 号 就 表示 一 个 语句 结束 ， 多 个 语句 可 以 写 在 一 行内 。 例 如 : 


vara=1+3:vVvarb='abc': 


分 号 前 面 可 以 没有 任何 内 容 ，JavaScript 引擎 将 其 视 为 空 语 句 。 


上 面 的 代码 就 表示 3 个 空 语句 。 

表达 式 不 需要 分 号 结尾 。 一 旦 在 表达 式 后 面 添加 分 号 ， 则 JavaScript 引擎 就 将 表达 式 视 为 语句 ， 
这 样 会 产生 一 些 没有 任何 意义 的 语句 。 

1 让 

se 

上 面 两 行 语句 有 返回 值 ， 但 是 没有 任何 意义 ， 因 为 只 返回 一 个 单纯 的 值 ， 没 有 其 他 任何 操作 。 

那么 什么 是 JavaScript 语法 ， 它 又 包含 哪些 内 容 呢 ? 

JavaScript 语法 就 是 指 构成 合法 的 JavaScript 程序 的 所 有 规则 和 特征 的 集合 , 它 包括 词法 和 句法 两 


部 分 。 
回 “词法 定义 了 基本 编码 规则 ， 包 括 字 符 编码 规范 、 命 名 规则 、 标 识 符 规范 、 关 键 字 规范 、 注 释 | 
规则 、 特 殊 字 符 规范 等 。 | 

回 “句法 定义 了 Javaseript 的 逻辑 范式 ,包括 词语 用 法 、 句 式 用 法 和 隶 辑 结构 的 基本 规则 和 特性 等 。 | 

基本 语法 是 一 系列 强制 性 或 约束 性 的 规定 ， 凡 是 学 习 和 使 用 JavaScript 语言 的 用 户 都 应 该 熟悉 。| 

词法 规则 不 多 ， 初 学 时 建议 先 了 解 以 下 4 点 。 
(1) 编写 代码 时 要 区 分 大 小 写 。 
(2) 对 于 空格 等 分 隔 符 ，JavaScript 引擎 不 会 解析 ， 可 以 忽略 ， 因 此 可 以 使 用 分 隔 符 格式 化 代码 。 
(3) 要 正确 使 用 “// 注 释 信息 ”或 “/* 注 释 信息 */” 语 法 注释 代码 。 
(4) 了 解 标识 符 命名 基本 约定 ， 了 解 关键 字 、 保 留 字 、 转 义 字符 等 概念 。 
关于 词法 的 详细 说 明 ， 仅 作为 选 学 内 容 在 线 呈 现 ， 推 荐 扫 码 阅读 。 。 加 
有 关 语法 规则 将 在 后 面 各 章节 中 按 主 题 分 类 逐步 展开 讲解. 如 果 想 简 ”RN@ 
单 了 解 语法 的 基本 情况 ， 可 以 扫 码 阅读 。 i 
线 上 阅读 1 
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| 9 :要 量 


变量 与 值 是 两 个 不 同 的 概念 ， 变 量 是 对 “ 值 ”的 引用 ， 使 用 变量 等 同 于 引用 一 个 值 。 每 一 个 变量 


| 在 JavaScript 中 ， 声 明 变 量 使 用 var 语句 。 

| Var a; // 声明 一 个 变量 

| vara, b, c¢; // 声明 多 个 变量 

一 个 语句 中 ， 可 以 同时 声明 多 个 变量 ， 这 时 应 该 使 用 逗号 运算 符 分 隔 多 个 变量 名 。 
【示例 1】 可 以 在 声明 中 为 变量 赋值 。 未 赋值 的 变量 ， 则 初始 值 为 undefined (未 定义 ) 值 。 


| 
| vara / 声明 但 没有 赋值 
varb=1: // 声明 并 赋值 
| alert(a); // 返回 undefined 
alertb: // 返回 1 
| 【示例 2】 在 JavaScript 中 ， 可 以 重复 声明 同一 个 变量 ， 也 可 以 反复 初始 化 变量 的 值 。 
| vara=1 
| Var a=2: 
Var a=3; 
alert(a); 1/ 返回 3 


| 
JavaScript 允许 用 户 不 声明 变量 , 而 直接 为 变量 赋值 , 这 是 因为 JavaScript 解释 器 能 够 自动 隐 式 声 
明 变 量 。 但 是 隐 式 声明 的 变量 总 是 作为 全 局 变量 。 

【示例 3】 当 在 函数 中 不 声明 就 直接 为 变量 赋值 时 ，JavaScript 会 把 它 视 为 全 局 变量 进行 处 理 。 
由 于 是 全 局 变量 ， 函 数 外 代码 可 以 访问 该 变量 的 值 。 


6 
二 下 // 未 声明 直接 赋值 
varb=2: / 声明 并 赋值 
站 
| 10: / 调用 函数 ， 实 现 变量 初始 化 
| alert(a): / 返回 1 
| alert(b): / 提示 语法 错误 ， 找 不 到 该 变量 


4 注意 : 如 果 尝 试 读 取 一 个 未 声 明 的 变量 的 值 ，JavaScript 会 提示 语法 错误 。 为 变量 赋值 的 过 程 ， 
| 实际 上 JavaScript 也 会 隐 式 进行 声明 。 在 使 用 变量 时 ， 应 该 养 成 良好 习惯 : 先 声明 ， 后 读 
| 写 ; 先 赋值 ， 后 运算 。 

。 var 语 各 声明 的 变量 是 JavaSeript 标准 声明 变量 的 方法 ， 同 时 使 用 var 语句 声明 的 变量 是 永久 的 ， 
| 不 能 够 使 用 delete 运算 符 删除 。 

| 【示例 4】var 语句 的 使 用 范围 有 限 ， 不 能 在 循环 或 条 件 语句 的 条 件 表达 式 中 使 用 。 例 如 ， 下 面 
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两 种 用 法 都 是 错误 的 。 
while(vari=0, (i++) <10) { 


alert(D):; 

} 

这 vari= false) { 
alert(D); 

| 


但 是 ， 可 以 在 for 或 for-in 语句 的 条 件 表 达 式 中 使 用 。 例 如 : 


for(vari= 0; i<10: itHb { 


alert(); | 
} | 
for(var i in document) { 

alert(D; 
} 


2.2.2 ”赋值 变量 


使 用 等 号 (= ) 运算 符 可 以 为 变量 赋值 ,等 号 左 侧 为 变量 名 , 右 侧 为 值 或 可 以 转化 为 值 的 表达 式 。 | 视频 讲解 

JavaScript 引擎 的 工作 方式 是 ， 在 预 编 译 期 先 解析 代码 ， 获 取 所 有 被 声明 的 变量 ， 然 后 在 执行 期 | 
再 一 行 一 行 地 运行 。 这 造成 的 结果 ， 就 是 所 有 的 变量 的 声明 语句 ， 都 会 被 提升 到 代码 的 头 部 ， 这 就 叫 | 
作 变 量 提升 (Hoisting)。 | 

【示例 】 编 写 如 下 2 行 代码 。 

console.log(a); 

vara=1; 

上 面 代码 首先 使 用 console.log0 方 法 ， 在 控制 台 (Console) 显示 变量 a 的 值 。 这 时 变量 a 还 没有 
声明 和 赋值 ， 所 以 这 是 一 种 错误 的 做 法 ,但 是 实际 上 浏览 器 不 会 报错 。 因 为 存在 变量 提升 ,真正 运行 
的 是 下 面 的 代码 。 

Var a; 

console.log(a): 

a=1: 


最 后 显示 结果 是 undefined， 表 示 变 量 a 已 声明 ， 但 还 未 赋值 。 


< 轴 注意 : 变量 提升 只 对 var 命令 声明 的 变量 有 效 ， 如 果 一 个 变量 不 是 用 var 命令 声明 的 ， 就 不 会 发 
生变 量 提升 。 例 如 : 


console.log(b): 
b=1; 


上 面 的 语句 将 会 报错 ,提示 ReferenceError: b is not defined， 即 变量 b 未 声明 , 这 是 因为 b 不 是 用 
var 命令 声明 的 ，JavaScript 引擎 不 会 将 其 提升 ， 而 只 是 视 为 对 顶层 对 象 的 b 属性 的 赋值 。 
沿 


2.2.3 ”变量 的 作用 域 | 
| 四 
变量 的 作用 域 (Scope) 也 称 为 可 见 性 ， 是 指 变量 在 程序 中 可 访问 的 有 效 范围 。 在 JavaScript 中 ， | 视 


。19 。 


网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版 ) 


| 变量 作用 域 可 以 分 为 全 局 作用 域 和 函数 作用 域 。 

全 局 作用 域 是 指 变量 在 整个 页 面 脚本 中 都 可 见 ， 对 应 变量 为 全 局 变量 。 

函数 作用 域 是 指 变量 仅 能 在 声明 的 函数 内 部 可 见 ， 函 数 外 是 不 允许 访问 的 。 有 时 也 称 之 为 局 部 作 
县 对 应 变量 为 局 部 变量 。 


【示例 】 下 面 示例 演示 了 如 果 不 显 式 声明 局 部 变量 所 带 来 的 后 果 。 


te 


| (function) { 
| jQuery = windowjQuery = window.$ = function0 {}; 
| D0 
alert(jQuery); / 结果 读 取 了 函数 内 部 封装 的 代码 


| 因此 ， 在 函数 体内 使 用 全 局 变量 是 一 种 很 危险 的 行为 ， 应 该 养 成 在 函数 体内 使 用 var 语句 声明 局 
加 | 部 变量 的 习惯 


2.2.4 全 局 变量 
定义 全 局 变量 有 以 下 3 种 方式 。 
回 在 任何 函数 外 面 直接 使 用 var 语句 声明 。 
var f= Value' 
回 直接 添加 一 个 属性 到 全 局 对 象 上 。 在 Web 浏览 器 中 ， 全 局 对 象 为 window。 
window.f = "value'; 
回 ”直接 使 用 未 经 声明 的 变量 ， 以 这 种 方式 定义 的 全 局 变量 被 称 为 隐 式 的 全 局 变量 。 
f= "value': 


ET 月 全 人 人 可 和 .人 月 | 
努力 减少 使 用 全 局 变量 的 方法 。 


| 【示例 1) 在 脚本 中 可 以 创建 唯一 一 个 接口 ， 用 来 管理 应 用 程序 的 所 有 变量 ， 这 样 可 以 有 效 降低 
| 应 应 用 程序 的 变量 污染 问题 。 
| 


Var MyApp = ©}: 


| 
| ao: finctionO { 
| / 执行 任务 
} 

a 
| 【示例 2】 使 用 函数 体 来 保护 变量 ， 这 是 另 一 种 有 效 减少 “全 局 污染 ”的 方法 ， 也 是 最 有 效 、 最 
| 安全 的 方法 ， 是 应 用 最 广泛 的 一 种 编程 模式 。 
varMyApp = function0 { 
| this.name = "AppName": 
| thiswork = { 
1 id: 123, 
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do: function0 { 
/ 执行 任务 
} 


5 
呈 


定义 在 函数 体内 的 参数 和 变量 在 函数 体外 不 可 见 ， 但 在 函数 体内 可 见 。 


2.3 数据 类 型 
我 们 常 说 的 变量 类 型 ， 实 际 上 就 是 变量 存储 值 的 类 型 。JavaScript 是 弱 类 型 语言 ， 对 于 数据 类 型 | 
的 规范 不 是 很 严格 。 但 是 正确 使 用 变量 类 型 ， 可 以 避免 各 种 异常 。 
2.3.1 检测 类 型 
JavaScript 定义 了 6 种 基本 数据 类 型 ， 说 明 如 表 2.1 所 示 。 
表 2.1 JavaScript 基本 数据 类 型 


数据 类 型 说 了 明 

null 空 值 。 表 示 无 值 ， 即 此 处 的 值 就 是 “无 ”的 状态 

Undefined 未 定义 。 表 示 不 存在 ， 由 于 目前 没有 定义 ， 所 以 此 处 暂时 没有 任何 值 
number 数值 。 整 数 和 小 数 ， 如 1 和 3.14 | 
String 字符 串 。 字 符 组 成 的 文本 ， 如 "Hello World" | 
boolean 布尔 值 。tme〈 真 )》 和 false〈 假 ) 两 个 特定 值 | 
object 对 象 。 各 种 值 组 成 的 集合 | 


容 提示 : ECMAScript 6 新 增 第 7 种 Symbol 类 型 的 值 ， 由 于 浏览 器 的 兼容 性 ， 本 书 暂 不 涉及 。 


使 用 typeof 运算 符 可 以 检测 数据 类 型 ， 它 以 字符 串 的 形式 返回 上 述 6 种 基本 类 型 之 一 。 
【示例 1】 下 面 使 用 typeof 运算 符 分 别 检测 常用 特殊 值 的 数据 类 型 。 


alert(typeof 1): // 返回 字符 串 "number” | 
alert(typeof "1"): // 返回 字符 串 "string" | 
alert(typeof true): // 返回 字符 串 "boolean" | 
alert(typeof {}): / 返回 字符 串 "object" | 
alert(typeof []): // 返回 字符 串 "object | 
alert(typeof function0 {}): // 返回 字符 串 "function" 

alert(typeof null); / 返回 字符 串 "object" 

alert(typeof undefined): // 返回 字符 串 "undefined" 


< 注意 : typeof 运算 符 有 两 个 特殊 的 返回 值 ， 把 null 标识 为 Object 类 型 ， 把 function0 〇 0 了} 标识 为 
Function 类 型 。 | 


也 就 是 说 ， 使 用 typeof 运算 符 可 以 识别 函数 ， 但 是 函数 不 是 一 种 基本 数据 类 型 ， 可 以 把 它 作为 | 
Object 类 型 的 一 种 特殊 子 类 型 来 理解 。 | 
| 
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【示例 2】 由 于 typeof null 返回 字符 串 为 "object"， 要 有 效 检测 JavaScript 基本 数据 类 型 ， 可 以 自 
定义 一 个 type 方 法 ， 解 决 基本 类 型 的 区 分 问题 。 
2 function type(o) {/ 返回 值 类 型 数据 的 类 型 字符 串 
会 扩 | | Tetum (0 — null) ? "null (typeof o): 

| // 如 果 是 null 值 ， 则 返回 字符 串 "null"， 否 则 返回 (typeof o) 表 达 式 的 值 
， 
| 上 面 代 码 可 以 有 效 避 开 因为 null 值 影响 基本 数据 的 类 型 检测 。 

【拓展 】 

通常 ， 将 数值 、 字 符 串 、 布 尔 值 称 为 原始 类 型 (Primitive Type) 的 值 ， 即 不 能 再 细 分 。 而 将 对 象 
称 为 合成 类 型 (Complex Type) 的 值 ， 因 为 一 个 对 象 往往 是 多 个 原始 类 型 的 值 的 合成 ， 可 以 看 作 是 一 
个 存放 各 种 值 的 容器 。 至 于 undefined 和 null， 一 般 将 它们 看 成 两 个 特殊 值 。 

对 象 又 可 以 分 成 以 下 3 个 子 类 型 。 

狭义 的 对 象 (Object) 。 

数组 (Array) 。 

函数 (Function) 。 

狭义 的 对 象 和 数组 是 两 种 不 同 的 数据 组 合 方式 ， 而 函数 是 处 理 数据 的 方法 。JavaScript 把 函数 当 
| 成 一 种 数据 类 型 ， 可 以 像 其 他 类 型 的 数据 一 样 ， 进 行 赋值 和 传递 ， 这 为 编程 带 来 了 很 大 的 灵活 性 ， 体 
| 现 了 JavaScript 作为 “函数 式 语言 ”的 本 质 。 


容 提示: 关于 合成 型 对 象 ， 将 在 后 面 章节 中 专门 讲解 ， 本 节 先 不 涉及 。 


”的 注意 : JavaScript 的 所 有 数据 ， 都 可 以 视 为 广义 的 对 象 。 不 仅 数组 和 函数 属于 对 象 ， 就 连 原始 类 
| 型 的 数据 ( 数值、 字符 串 、 布 尔 值 ) 也 可 以 用 对 象 方式 调用 。 为 了 避免 混淆 ， 此 后 除非 特 
别 声明 ， 本 书 提 及 的 “对 象 ”都 特 指 狭义 的 对 象 。 


2.3.2 数值 


数值 (Number) 也 称 数 字 。JavaScript 不 细 分 整 型 、 浮 点 型 ， 所 有 数值 都 属于 浮 点 数 。 
1. 数值 直接 量 
当 数 值 直 接 出 现在 程序 中 时 ， 被 称 为 数值 直接 量 。 在 JavaScript 程序 中 ， 直 接 输入 的 任何 数字 都 


被 视 为 数值 直接 量 。 
【示例 1】 数 值 直 接 量 可 以 细 分 为 整 型 直接 量 和 浮 点 型 直接 量 。 浮 点 数 是 带 有 小 数 点 的 数值 ， 而 
整数 是 不 带 小 数 点 的 数值 。 
varint= 1; // 整 型 数值 
varfloat= 1.0: // 浮 点 型 数值 


| 整数 一 般 都 是 32 位 数值 ， 而 浮 点 数 一 般 都 是 64 位 数值 。 
【示例 2】 浮 点 数 可 以 使 用 科学 计数 法 来 表示 。 

| Var float = 1.2e3; 

| 等 价 于 

| var float = 1.2*10*10*10:; 


se 
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或 
var float = 1200; 
其 中 e (或 E) 表示 底数 ， 其 值 为 10， 而 e 后 面 跟随 的 是 10 的 指数 。 指 数 是 一 个 整 型 数值 , 可 | 
以 取 正 负 值 。 | 
2. 八进制 和 十 六 进 制 数值 
JavaScript 支持 八进制 和 十 六 进 制 数值 直接 量 。 | 
【示例 3】 十 六 进 制 数值 直接 量 以 “0X” 或 “0x” 作 为 前 级 ， 后 面 跟随 十 六 进 制 的 数值 。 十 六 进 | 
制 的 数值 是 从 0 一 9 和 a~f 的 数字 或 字母 任意 组 合 ， 用 来 表示 0 一 15 之 间 的 某 个 数字 ， 超 过 这 个 范围 | 
则 以 进 制 表示 。 | 
| 


varnum = Ox1F4: / 十 六 进 制 数值 
alert(num): / 返回 十 进 制 值 为 500 

【示例 4】 八 进 制 数值 直接 量 以 数字 0 为 前 级， 其 后 跟随 一 个 八进制 的 数值 。 | 
var num = 0764: / 八进制 数值 | 
alert(num); // 返回 500 | 


八进制 或 十 六 进 制 的 数值 在 参与 数学 运算 之 后 ， 返 回 的 都 是 十 进 制 数值 。 

< 拟 注 意 : 考虑 到 安全 性 ， 不 建议 使 用 八进制 数值 直接 量 ， 因 为 JavaScript 可 能 会 误解 析 为 十 进 制 
数值 。 

3. 数值 运算 

使 用 算术 运算 符 ， 可 以 参与 各 种 计算 ， 如 加 、 减 、 乘 、 除 等 。 

同时 ，JavaScript 内 置 Math 对 象 ， 该 对 象 提供 大 量 数 学 方法 ， 直 接 调 用 这 些 方法 可 以 解决 专业 数 
学 计算 问题 ， 详 细 说 明 请 参考 JavaScript 参考 手册 。 

4. 特殊 数值 

JavaScript 预定 义 多 个 特殊 数值 常量 ， 说 明 如 表 2.2 所 示 。 


表 2.2 ”特殊 数值 列表 


特 殊 值 说 明 | 

Infini 无 穷 大 .。 当 数值 超过 浮 点 型 所 能 够 表示 的 范围 。 反之 , 负 无 穷 大 为 -Infinity | 
NaN 非 数 值 。 不 等 于 任何 数值 ， 包 括 自己 。 如 0 除 以 0 的 返回 值 | 
| 

| 


最 大 值 

最 小 值 ， 一 个 接近 0 的 数值 
非 数值 ， 与 NaN 相同 

正 无 穷 大 

负 无 穷 大 


Number MAX VALUE 
Number MIN VALUE 

Number NaN 
Number.POSITIVE INFINITY 
Number.NEGATIVE INFINITY 


峰 提示 : NaN (Nota Number， 非 数字 值 ) 表示 一 个 特殊 的 数值 。 在 试图 将 非 数 字形 式 的 字符 囊 转 | 
换 为 数字 时 都 会 返回 NaN。 例 如 : 
1 /0 
+'oops /NaN 
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如 果 NaN 参与 数学 运算 ， 返 回 结果 都 是 NaN。 
为 了 有 效 检测 NaN 值 ，JavaScript 提供 isNaN0 方 法 。 例 如 : 
2 isNaN(NaN) /tre 
fisNaN(O. // false 
到 | RN // me 
ey 
| isFinite() 方 法 可 以 有 效 检测 一 个 值 是 否 可 用 作 数 字 ， 使 用 它 可 以 过 滤 NaN 和 Infinity 值 。 
| 如 果 检 测 一 个 值 是 否 为 数值 , 使 用 isFinite 函数 进行 检测 , 不 是 很 周全 , 这 时 可 以 自 定义 isNumber 
| 函数 ， 修 补 检测 漏洞 。 
| var jumber = finction jstumbertvalue) { 
| Tetum typeof value —= mumber && isFinite(value): 
| 


【拓展 】 
限于 篇 幅 ， 本 节 仅 重点 讲解 了 有 关 数 值 类 型 的 基本 知识 和 用 法 ,读者 也 可 以 扫 
码 深度 阅读 。 


| 字符 串 〈String) 也 称 文本 ，JavaScript 不 细 分 字符 串 和 字符 。 
| 1. 字符 串 直 接 量 
| 
| 字符 串 由 Unicode 字符 、 数 字 和 各 种 符号 组 合 而 成 ， 在 JavaScript 1.3 版 本 以 前 仅 支持 ASCII 字 
| 符 集 和 Latin-1 字符 集 。 字 符 串 必须 包含 在 单 引号 或 双 引 号 之 中 。 
如 果 字 符 串 包含 在 双 引号 中 ， 则 字符 串 内 可 以 包含 单 引号 。 反 之 ， 可 以 在 单 引号 中 包含 双 


| 

| 引号 。 

| 回 字符 串 应 在 一 行内 显示 ， 换 行 显示 是 不 允许 的 。 例 如 ， 下 面 写法 是 错误 的 。 
alert(" 字 符 串 

二); // 提示 错误 

| 如 果 需 要 字符 串 换行 显示 ， 可 以 在 字符 串 中 添加 换行 符 《〈m)。 例 如 ， 

alert( 字 符 囊 w 直接 量 人 ) 三 在 字符 串 中 添加 换行 符 


回 “在 字符 串 中 添加 特殊 字符 ， 需 要 转 义 字符 表示 ， 如 单 引号 、 双 引号 等 。 
| 回 字符 口中 每 个 字符 都 有 固定 的 位 置 。 首 字符 的 下 标 位 置 为 0， 第 2 个 字符 的 下 标 位 置 为 1， 
依 此 类 推 。 这 与 数组 元 素 的 位 置 一 样 ， 最 后 一 个 字符 的 下 标 位 置 是 字符 串 长 度 减 1。 
2. 转 义 序列 
| 转 义 序列 ， 是 字符 的 一 种 间接 表示 方式 。 在 特殊 语 境 中 ， 无 法 直接 使 用 字符 自身 。 例 如 ， 在 字符 
”出 中 包含 说 话 内 容 。 
不 居 则 周 ， 思 而 不 学 则 歼 。 
”由 于 JavaSeript 已 经 赋予 了 双 引 号 为 字符 趾 直 接 量 的 声明 符号 ， 如 果 在 字符 串 中 包含 双 引号 ， 就 
| 会 破坏 字符 串 直接 量 。 解 决 方法 必须 使 用 转 义 表示 。 
学 下 学 而 不 天 则 周 ， 昌 而 不 学 则 将， 
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JavaScript 定义 反 斜 杠 加 上 字符 可 以 表示 字符 自身 。 但 是 一 些 字 符 加 上 反 和 斜 杠 后 会 表示 特殊 含义 ， 
这 些 特殊 转 义 字符 被 称 为 转 义 序列 ， 如 表 2.3 所 示 。 


表 2.3 ” JavaScript 转 义 序列 


序 列 序列 所 代表 的 字符 

v0 Null 字符 (\u0000) 

vb 退 格 符 (Wn0008) | 
此 水 平 制 表 符 〈\u0009) | 
un 换行 符 (\n000A) | 
垂直 制 表 符 (Wu000B) | 
¥ 换 页 符 (\n000C) | 
上 回 车 符 (\u000D) | 
i 双 引 号 (Wu0022) 

v 单 引号 (Wu0027) | 
\ 反 和 斜 线 (\u005C) | 
WXX 由 两 位 十 六 进 制 数值 XX 指定 的 Latin-1 字符 

\uXXXX 由 4 位 十 六 进 制 数值 XXXX 指定 的 Unicode 字符 

\XXX, 由 1~3 位 八进制 数值 指定 的 Latin-1 字符 。ECMAScript 3.0 版 本 不 支持 ， 一 般 不 建议 使 用 


由 于 反 斜 杠 具 有 转 义 功能 , 但 它 仅 对 特殊 字符 有 和 转 义 功能 ， 因此 当 在 一 个 正常 字符 前 添加 反 斜 杠 
时 ，JavaScript 会 忽略 该 反 斜 杠 。 例 如 : 


alert(" 子 日 :学 \ 而 \ 不 \ 思 \ 则 \ 周 \，\ 思 \ 而 \ 不 \ 学 \ 则 \ 殉 \。\v) 
等 价 于 : 
alert(" 子 日 :" 学 而 不 思 则 周 ， 思 而 不 学 则 玛 。\"") 


3. 字符 串 操作 
使 用 加 号 (+) 运算 符 可 以 连接 两 个 字符 串 。 
【示例 1】 下 面 代码 将 返回 “学 而 不 思 则 冉 思 而 不 学 则 列 ” 合 并 后 的 字符 串 。 
alert(" 学 而 不 思 则 周 "+ " 思 而 不 学 则 殖 "): 
【示例 2】 使 用 length 属性 可 以 返回 字符 串 的 字符 长 度 ， 下 面 代 码 将 返回 13。 
alert(" 学 而 不 思 则 周 ， 思 而 不 学 则 歼 ".length); 。// 返回 13 | 
调用 String 对 象 的 方法 ， 可 以 做 复杂 的 字符 串 操 作 ， 如 果 配 合 正则 表达 式 ， 还 可 以 实现 字符 串 的 | 
智能 操作 ， 有 关内 容 将 在 后 面 章节 集中 讲解 。 
2.3.4 布尔 值 
布尔 型 (Boolean) 仅 包含 两 个 值 : true 和 false， 其 中 true 表示 “ 真 ”，false 表示 “ 假 ”。 


全) 注意 : 在 JavaScript 中 ，undefined、null、""、0、NaN 和 false 这 6 个 特殊 值 转换 为 逻辑 值 时 都 | 
为 false， 被 俗称 为 假 值 。 除 了 假 值 之 外 ， 其 他 任何 类 型 的 值 转换 为 逻辑 值 时 都 是 tue， 如 | 
空 数 组 (中) 和 空 对 象 ( 和} ) 对 应 的 布尔 值 ， 都 是 tmue。 | 
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【示例 1】 下 面 使 用 Boolean 构造 函数 强制 转换 各 种 特殊 值 为 布尔 值 。 


| alert(Boolean(0)): / 返回 false 
| alert(Boolean(NaNJ): / 返回 ilse 
全 7 | alert(Boolean(nulD)): / 返回 false 
= | alert(Boolean("")): /1/ 返回 false 
alert(Boolean(undefined)): // 返回 false 
| 【示例 2】 下 面 代码 利用 假 值 的 特殊 性 ， 判 断 变量 a 是 否 为 空 ， 如 果 为 空 ， 则 重新 赋值 。 
| 这 af 
a="yes"; 
} 
/ 或 者 
a=a7a."yes": // 如 果 变 量 a 为 空 则 重新 赋值 ， 否 则 采用 原 值 


2.3.5 Null 和 Undefined 


null 是 Null 型 的 直接 量 ， 表 示 空 值 。 
| undefined 是 Undefined 类 型 的 直接 量 ， 表 示 未 定义 的 值 。 当 声明 变量 未 赋值 时 ， 或 者 属性 未 设置 


痊 提示 : null 和 undefined 的 行为 非常 相似 , 含义 和 用 法 也 差不多 ,它们 是 早期 JavaSeript 语 言 不 成 
热 的 产物 ， 并 一 直 沿 用 到 现在 . 
【示例 1】null 和 undefined 都 表示 缺少 值 ， 也 都 是 假 值 ， 可 以 相等 。 
alert(null — undefined): // 返回 tme 
但 是 ，null 和 undefined 属于 不 同类 型 ， 使 用 全 等 运算 符 =-=-) 或 typeof 运算 符 可 以 区 分 。 
alert(null —= undefined); // 返回 false 
【示例 2】 检 测 一 个 变量 是 否 被 初始 化 ， 可 以 借助 undefined 进行 快速 检测 。 


(a — undefined) && (a = 0): // 检测 变量 是 否 初始 化 ， 否 则 为 其 赋值 
/ 也 可 以 使 用 typeof 运算 符 


| 
| 
| (typeof a — "undefined") &é& (a = 0): 


| 【示例 3】 在 下 面 代码 中 ， 声 明了 变量 a， 而 没有 声明 变量 b， 然 后 使 用 typeof 运算 符 检测 它们 
， 的 类 型 ， 返 回 的 值 都 是 字符 串 "undefined"。 说 明 不 管 是 声明 ， 还 是 未 声明 的 变量 ， 都 可 以 通过 typeof 


| 运算 符 检测 变量 是 否 初始 化 。 
| Var a; 
| alert(typeof a): / 返回 "undefined" 
alert(typeofb): // 返回 "undefined" 
| “对 于 未 声明 的 变量 ， 如 果 直接 使 用 ， 会 引发 异常 。 
| at 一 undefinedj: // 提示 未 定义 的 错误 信息 
| 【示例 4】 对 于 函数 来 说 ， 如 果 没 有 明确 的 返回 值 ， 则 默认 返回 值 为 undefined。 
fnction (0 0 
| alert(f0): // 返回 "undefined" 
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内 提示 : 与 null 还 不 同 ，undefined 不 是 JavaScript 保留 字 ， 在 ECMAScript v3 标准 中 才 预 定义 


undefined 为 全 局 变量 ， 初 始 值 为 undefined。 


【拓展 】 
null 和 undefined 的 行为 非常 相似 ， 含 义 与 用 法 都 差不多 ， 为 什么 JavaScript 
要 同时 设置 这 样 两 个 特殊 类 型 的 值 ， 详 细 原 因 请 扫 码 阅读 。 


24 运 算 符 


运算 符 是 执行 各 种 运算 操作 的 符号 ,大 部 分 JavaScript 运 算 符 用 标点 符号 表示 ， 
如 “+” 和 “=” 也 有 几 个 运算 符 由 关键 字 表 示 ， 如 delete 和 instanceof。 
JavaScript 定义 了 51 个 运算 符 ， 详 细 说 明 请 扫 码 阅读 。 
一 般 情况 下 ， 运 算 符 与 运算 数 配 合 才 能 使 用 。 其 中 运算 符 指定 执行 运算 的 方 
式 ， 运 算数 明确 运算 符 要 操作 的 值 。 
例如 ，1 加 1 等 于 2， 用 符号 表示 就 是 “1+1=2”， 其 中 1 是 被 操作 的 数 ， 简 称 为 操作 数 〈 或 运算 
数 )， 符 号 “+” 表示 加 运算 的 操作 ， 符 号 “=” 表示 赋值 运算 的 操作 ,“1+1=2” 就 表示 一 个 表达 式 。 
根据 操作 运算 数 的 数量 ， 运 算 符 可 以 分 为 下 面 3 类 。 
一 元 运算 符 : 一 个 运算 符 仅 对 一 个 运算 数 执行 某 种 运算 ， 如 值 取 反 、 位 移 、 获 取 值 类 型 、 删 
除 属性 定义 等 。 
二 元 运算 符 : 一 个 运算 符 必须 包含 两 个 运算 数 。 例 如 ， 两 个 数 相 加 ， 两 个 值 比 较 。 大 部 分 运 
算 符 都 是 对 两 个 运算 数 执行 运算 。 
三 元 运算 符 : 一 个 运算 符 必须 包含 三 个 运算 数 。JavaScript 仅 有 的 一 个 三 元 运算 符 (?: 运 算 符 )， 
该 运算 符 就 是 条 件 运算 符 ， 它 是 站 语句 的 简化 版 。 
运算 符 的 优先 级 控制 运算 操作 的 顺序 。 例 如 ，1+2*3 结果 是 7， 而 不 是 9， 因 为 乘法 优先 级 高 ， 


虽然 加 号 在 左 侧 。 | 
小 括号 运算 符 的 优先 级 最 高 , 使 用 小 括号 可 以 改变 运算 符 的 优先 顺序 。 例 如 , (1+2)*3 结果 是 9， | 

而 不 再 是 7。 | 
【示例 1】 看 看 下 面 这 3 行 代码 : | 
alert(n=5-2*2): 1/ 返回 1 | 
alert(n=(5-2)*2): // 返回 6 | 
alert((0=5-2)*2): // 返回 6 | 


在 上 面 代码 中 ， 虽 然 第 2 行 与 第 3 行 返回 结果 相同 ， 但 是 它们 运算 顺序 不 同 。 第 2 行 先 计算 5 减 | 
2， 再 乘 以 2， 最 后 赋值 给 变量 n， 并 显示 变量 ma 的 值 ， 而 第 3 行 先 计算 5 减 2， 再 把 结果 赋值 给 变量 
n， 最 后 变量 n 乘 以 2， 并 显示 二 者 所 乘 结果 。 

下 面 代码 就 会 抛 出 异常 。 

alert((1+n=5-2)*2): // 抛 出 异常 

因为 ， 加 号 运算 符 优 先 级 高 ， 先 执行 运算 ， 但 是 此 时 的 变量 na 还 是 一 个 未 知 数 ， 所 以 就 报错 。 

一 元 运算 符 、 三 元 运算 符 和 赋值 运算 符 都 遵循 从 右 到 左 的 顺序 执行 运算 。 其 他 运算 符 按 默认 的 从 
左 到 右 顺 序 执 行 运算 。 
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【示例 2】 根 据 运算 符 的 运算 顺序 ， 下 面 代码 是 按 先 右 后 左 的 顺序 执行 运算 的 。typeof 5 运算 结 
| 果 是 number， 而 返回 结果 “number” 又 是 一 个 字符 串 ， 所 以 typeof typeof 5 最 终 返回 string。 
| 


， alert(typeof typeof 5): // 返回 string 
和 村 于 上 而 代码， 可 以 使 用 小 括号 标识 它们 的 先后 运算 顺序 如 下 .。 
Note | alert(typeof (typeof 5)): // 返回 string 
| 而 对 于 下 面 表达 式 ， 
1+2+3+4 
就 等 于 如 下 。 
CE 


运算 符 只 能 操作 特定 类 型 的 数据 ， 运 算 返 回 值 也 是 特定 类 型 的 数据 。 例 如 ， 加 减 乘 除 等 算术 运算 
| 符 所 返回 的 结果 永远 都 是 数值 ， 而 比较 运算 符 所 返回 的 结果 也 都 是 布尔 值 。 

| 【示例 3】 下 面 代 码 中 ， 两 个 运算 数 都 是 字符 串 ， 但 是 JavaScript 会 自动 把 两 个 操作 数 转换 为 数 
字 ， 并 执行 减法 运算 ， 返 回 数字 结果 。 


alert("10"—"20"): // 返回 -10 
下 面 代码 中 , 数字 0 本 是 数值 类 型 , JavaScript 会 把 它 转换 为 布尔 值 false, 然后 再 执行 条 件 运算 。 
| alert(021:2): / 返回 -2 
| 
| 下 面 代码 中 ， 字 符 串 5 和 2 分 别 被 转换 为 数字 ， 然 后 参与 比较 运算 ， 并 返回 布尔 值 。 
| alert3>"5); // 返回 false 
| alert(3>"2"): // 返回 tme 
| 下 面 的 数字 5 被 转换 为 字符 编码 ， 参 与 字符 串 比 较 运 算 。 
| ar // 返回 false 
下 面 代码 中 ， 加 号 运算 符 能 够 根据 数据 类 型 执行 相 加 或 是 相连 的 操作 。 
| aler(10+20); // 返回 30 
| alert("10"+"20"):; / 返回 "1020" 
| 
| 下 面 代 码 中 ， 布 尔 值 true 被 转换 为 数字 1 参与 乘法 运算 ， 并 返回 值 为 5。 
alert(true*"5"); /1 返回 5 
| 


b> 注意 : 运算 符 一 般 不 会 对 运算 数 本 身 产生 影响 , 如 算术 运算 符 、 比 较 运 算 符 、 条件 运 算 符 、 取 逆 、 
位 与 等 .例如 ,a =b+c, 其 中 的 运算 数 b 和 c 不 会 因为 加 法 运算 而 导致 自身 的 值 发 生变 化 。 

| 但是， 在 JavaSeript 中 有 一 些 运算 符 能 够 改变 运算 数 自身 的 信 ， 如 赋值 、 递 增 、 递 减 运 算 等 。 由 

| 于 这 类 运算 符 自身 的 值 会 发 生变 化 ,具有 一 定 的 副作用 ， 使 用 时 应 该 保持 警惕 ,特别 是 在 复杂 表达 式 

中 ， 这 种 副作用 就 非常 明显 。 

| 【示例 4】 在 下 面 代码 中 ， 变 量 a 经 过 赋值 运算 和 递 加 运算 之 后 ， 变 量 的 值 发 生 了 两 次 变化 。 


Var a; 
a=0; 
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att; 

alert(a): / 返回 1 
修改 上 述 表 达 式 : 

Var a; 

ls 


a=(att)+(++a)-(att)-(++a); 
alert(a); 1/ 返回 -4 


如 果 直 观 判 断 ， 会 误 认 为 返回 值 为 0， 实 际 上 变量 a 在 参与 运算 的 过 程 中 ， 它 自身 的 值 是 不 断 变 | 


化 的 。 为 了 方便 理解 ， 下 面 拆 解 (at+)+(++a)-(at++)-(++a) 表 达 式 。 


Var a; 

a=1; // 变量 初始 化 

b=att; /b 等 于 1， 变 量 a 先 把 值 1 赋值 给 变量 b， 然 后 再 递 加 为 2 
c=+a; l/c 等 于 3， 变 量 a 先 递 加 为 3 后 ， 再 把 值 3 赋值 给 变量 
d=att; //d 等 于 3， 变 量 a 先 把 值 3 赋值 给 变量 4， 然 后 再 递 加 为 4 
e=+a; //e 等 于 5， 变 量 a 先 递 加 为 5 后， 再 把 值 5 赋值 给 变量 e 
alert(b+c-d-e); / 返回 -4 


从 代码 可 读 性 考虑 : 一 个 表达 式 中 不 能 够 对 于 相同 操作 数 执行 两 次 或 多 次 引起 自身 值 变化 的 运算 ，| 


除非 表达 式 必须 这 样 执行 ， 否 则 就 应 该 避免 制造 歧义 。 

下 面 代 码 行 虽然 看 起 来 比较 复杂 , 但 是 由 于 每 个 运算 数 仅 执行 了 一 次 引起 自身 值 变 化 的 运算 , 所 
以 不 会 制造 层 义 ， 也 不 会 扰乱 思维 。 

a=(bH+(H+O-(dHH) (H+e); 


2.5 使 用 算术 运算 从 


算术 运算 符 包括 : 加 (+)、 减 (-)、 乘 (*)、 除 (/)、 余 数 运算 符 (%)、 数 值 取 反 运算 符 (-)。 
2.5.1 加 法 运算 
【示例 1】 特 殊 运 算数 的 运算 结果 比较 特殊 ， 需 要 牢记 。 


Varn=5; // 定义 并 初始 化 任意 一 个 数值 
alert(NaN +D): // 返回 NaN。NaN 与 任意 运算 数 相 加 ， 结 果 都 是 NaN 
alert(Infinity + n): 

// 返回 Infinity。Infinity 与 任意 运算 数 相 加 ， 结 果 都 是 Infinity 
alert(Infinity + Infinity): 


// 返回 Infinity。Infinity 与 Infinity 相 加 ， 结 果 是 Infinity 
alert(( = Infinity) + (~ Infinity)): 
// 返回 -Infinity。 负 Infinity 相 加 ， 结 果 是 - mfinity 
alert(( ~ Infinity) + Infinity); 
// 返回 NaN。 正 负 Infinity 相 加 ， 结 果 是 NaN 
【示例 2】 加 运算 符 能 够 根据 运算 数 的 数据 类 型 ， 尽 可 能 地 把 数字 转换 成 可 以 执行 相 加 或 相连 接 
运算 的 数值 或 字符 串 。 
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alert(1 + 1): // 返回 2。 如 果 运 算数 都 是 数值 ， 则 进行 相 加 运算 
| alert(1 + "1"): 
| // 返回 "11"。 如 果 运 算数 中 有 一 个 是 字符 串 ， 则 把 数值 转换 为 字符 串 ， 然 后 进行 相连 运算 
| alert("1" + "1"): // 返回 "11"。 如 果 运 算数 都 是 字符 串 ， 则 进行 相连 运算 
铺盖 | 【示例 3】 下 面 两 个 表达 式 ， 由 于 空 字 符 串 的 位 置 不 同 ， 运 算 结果 也 是 不 同 。 在 第 一 行 代码 中 ， 
3.0 和 4.3 都 是 数值 类 型 ， 因 此 加 号 运算 符 就 执行 相 加 运算 ， 由 于 第 3 个 运算 数 是 字符 串 ， 则 把 第 一 
| 个 加 号 运算 结果 转换 为 字符 串 并 与 空 字符 串 进 行 相连 操作 。 而 第 二 行 代码 中 则 不 同 ， 第 一 个 加 号 运算 
| 符 首先 把 数值 3.0 转换 为 字符 串 ， 然 后 执行 相连 运算 ， 所 以 结果 也 就 不 同 。 
| alert(3.0 + 4.3 + ""); // 返回 "7.3" 
alert(3.0 + "" + 4.3); // 返回 "34.3" 


| 窟 提示 : 为 了 过 免 误 解 ， 使 用 加 法 运算 符 时 ， 应 先 检查 运算 数 的 数据 类 型 是 否 符合 需要 。 


2.5.2 减法 运算 
【示例 1] 特殊 运算 数 的 运算 结果 比较 特殊 ， 需 要 牢记 。 


Varn=5; // 定义 并 初始 化 任意 一 个 数值 
alert(NaN — n); // 返回 NaN。NaN 与 任意 运算 数 相 减 ， 结 果 都 是 NaN 
alert(Infinity — D): 


| / 返回 Infinity。Infinity 与 任意 运算 数 相 减 ， 结 果 都 是 Infinity 
| alert(Infinity - Infinity); 
| // 返回 NaN。Infinity 与 Infinity 相 减 ， 结 果 是 NaN 
alert((- Infinity) = ( ~ Infinity)): 
// 返回 NaN。 负 Infinity 相 减 ， 结 果 是 NaN 

| alert(( = Infinity) — Infinity): 
| / 返回 -Infinity。 正 负 Infinity 相 减 ， 结 果 是 -Infinity 
【示例 2】 在 减法 运算 中 ， 如 果 有 一 个 运算 数 不 是 数字 ， 则 返回 值 为 NaN; 如 果 数 字 为 字符 串 ， 
| 则 会 把 它 转换 为 数值 之 后 ， 再 进行 运算 。 
alert(2 - "1"): / 返回 1 
alert(2 — "a"): // 返回 NaN 
| 利用 减法 运算 可 快速 把 一 个 值 转换 为 数字 。 例如， 由 于 HTTP 请 求 值 一 般 都 是 字符 串 数字 ， 可 以 
| 让 这 些 字符 串 减 去 0 快速 转换 为 数值 。 这 与 调用 parseFloat0 方 法 结果 相同 , 但 减法 运输 符 更 高 效 、 更 
快捷 。 减 法 运算 符 的 隐 性 转换 如 果 失 败 ， 则 返回 NaN， 这 与 使 用 parseFloat() 方 法 执行 转换 时 返回 值 
是 不 同 的 。 

对 于 字符 串 来 说 ， 减 法 运算 符 能 够 完全 匹配 进行 转换 ， 如 果 字 符 串 是 非 数 字 的 值 ， 则 返回 NaN; 
| 而 parseFloat( 方 法 则 通过 逐 字符 解析 并 努力 转换 为 数值 。 

【示例 3】 对 于 字符 串 "100aaa" 而 言 ，parseFloat(0 方 法 能 够 解析 出 前 面 几 个 数字 ， 而 对 于 减法 运 

算 符 来 说 ， 则 必须 是 完整 的 数字 时 ， 可 以 进行 完全 匹配 转换 。 

alert(parseFloat("100aaa")): / 返回 100 

alert(parseFloat("aaa100")): / 返回 NaN 

alert("100aaa" - 0): / 返回 NaN 
| alert("100" — 0): / 返回 100 
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对 于 布尔 值 来 说 ，parseFloat0 方 法 能 够 把 true 转换 为 1， 把 false 转换 为 0， 而 减法 运算 符 视 其 为 | 
NaN。 
对 于 对 象 来 说 ,parseFloat() 方 法 直接 尝试 调用 对 象 的 toString( 方 法 进行 转换 ， 而 减法 运算 符 先 学 | 
试 调用 对 象 的 valueOf0 方 法 进行 转换 ， 失 败 之 后 再 调用 toStringO 进 行 转换 。 | 


2.5.3 ”乘法 运算 


两 个 正 数 相 乘 ， 则 为 正 数 ， 两 个 负数 相 乘 ， 则 为 正 数 ， 一 正 一 负 相 乘 ， 则 为 负数 。 
【示例 】 特 殊 运 算数 的 运算 结果 比较 特殊 ， 需 要 特别 留意 。 


Varn=5; / 定义 并 初始 化 任意 一 个 数值 | 
alert(NaN * D): / 返回 NaN。NaN 与 任意 运算 数 相 乘 ， 结 果 都 是 NaN ! 
alert(Infinity * n): | 
// 返回 Infinity。Infinity 与 任意 非 0 正 数 相 乘 ， 结 果 都 是 Infinity | 
alert(Infinity * ( — nm)); | 
/ 返回 Infinity。Infinity 与 任意 非 0 负数 相 乘 ， 结 果 都 是 -Infinity， | 
/ 换 句 话说 结果 的 符号 由 第 二 个 运算 数 的 符号 决定 | 
alert(Infinity * 0); | 
/ 返回 NaN。Infinity 与 0 相 乘 ， 结 果 是 NaN | 
alert(Infinity * Infinity); 


// 返回 Infinity。Infinity 与 mfinity 相 乘 ， 结 果 是 Infinity 


2.5.4 ”除法 运算 


两 个 正 数 相 除 ， 则 为 正 数 ， 两 个 负数 相 除 ， 则 为 正 数 ;一 正 一 负 相 除 ， 则 为 负数 。 
【示例 】 特 殊 运 算数 的 运算 结果 比较 特殊 ， 需 要 特别 留意 。 


Varn=5; // 定义 并 初始 化 任意 一 个 数值 
alert(NaN / nm): // 返回 NaN。 如 果 某 个 运算 数 是 NaN， 结 果 都 是 NaN 
alert(Infinity /D): 


// 返回 Infinity。Infinity 被 任意 数字 除 ， 结 果 都 是 Infinity 或 -Infinity， 
/ 符号 由 第 二 个 运算 数 的 符号 决定 

alert(Infinity / Infinity): / 返回 NaN 

alert(n / 0): 


// 返回 Infinity。0 除 一 个 非 无 穷 大 的 数字 ， 结 果 是 Infinity 或 -Infinity， 
/ 符号 由 第 二 个 运算 数 的 符号 决定 
alert(n / -0): / 返回 -Infinity。 参 考 上 一 行 注释 说 明 


2.5.5 ”余数 运算 
余数 运算 也 称 模 运算 ， 通 俗 说 就 是 求 余数 。 例 如 : 


alert(3 % 2): // 返回 余数 1 
模 运 算 主 要 针对 整数 执行 操作 ， 但 是 它 也 适用 浮 点 数 。 例 如 : 
alert(3.1 % 2.3): // 返回 余数 0.8000000000000003 


【示例 】 特 殊 运 算数 的 运算 结果 比较 特殊 ， 需 要 特别 留意 。 
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| Ke 
Varn=5; / 定义 并 初始 化 任意 一 个 数值 
alert(Infinity % n): 1/ 返回 NaN 
alert(Infinity % Infinity): / 返回 NaN 
alert(n % Infinity): / 返回 5 
alert(0 % n): / 返回 0 
alert(0 % Infinity): / 返回 0 
alert(n % 0): 1/ 返回 NaN 
alert(Infinity % 0); // 返回 NaN 
2.5.6 ” 取 反 运算 
| 取 反 运算 符 是 一 元 运算 符 ， 或 称 一 元 减法 运算 符 。 
| 【示例 】 下 面 列举 特殊 运算 数 的 取 反 运算 结果 。 
| alert(-5); / 返回 -5。 正 常数 值 取 负 数 
| alert(—"5"); // 返回 -<5。 先 转换 字符 串 数字 为 数值 类 型 
| alert(—"a"); // 返回 NaN。 无 法 完全 匹配 运算 ， 返 回 NaN 
| alert(-Infinity): / 返回 -Infinity 
| alert(-(-Infinity): // 返回 Infinity 
| alert(-NaN): // 返回 NaN 


容 提示 : 与 一 元 减法 运算 符 相对 应 的 还 有 一 个 一 元 加 法 运算 符 , 在 实际 开发 中 ， 一 元 加 法 运算 符 很 
| 少 使 用 ， 不 过 可 以 利用 它 把 非 数值 型 的 数字 快速 地 转换 为 数值 型 数值 。 
| 


“ 2.5.7 ”递增 和 递减 运算 
| 递增 (++) 和 递减 (一 ) 运算 就 是 通过 不 断 加 1 或 减 1 以 实现 改变 自身 值 的 一 种 快捷 运算 方法 。 


| 递增 运算 符 和 递减 运算 符 是 一 元 运算 符 ， 只 能 够 作用 于 变量 、 数 组 元 素 或 对 象 属性 ， 这 是 因为 在 运算 
| 过 程 中 会 执行 赋值 运算 ， 赋 值 运算 左 侧 必 须 是 一 个 变量 、 数 组 元 素 或 对 象 属性 ， 只 有 这 样 赋值 才 得 以 


| 实现 。 
| 【示例 1】 下 面 代 码 是 错误 用 法 。 
| alert(4++): // 返回 错误 
| 下面 代 码 是 正确 的 用 法 。 
varn=4: 
alert(n++): / 返回 4 


递增 运算 符 和 递减 运算 符 有 位 置 讲究 ， 位 置 不 同 所 得 运算 结果 也 不 同 。 
| 【示例 2】 下 面 递增 运算 符 是 先 执行 赋值 运算 , 然后 再 执行 递 加 运算 。 即 先 计算 表 达 式 的 返回 值 ， 
最 后 才 把 自身 值 递 加 。 


| 

| varn=4: 

| alert(n++): /1/ 返回 4 

| 

| 而 下 面 的 递增 运算 符 是 先 执行 递 加 运算 ， 再 返回 表达 式 的 值 。 
| Varn=4: 

| alert(++n): / 返回 5 
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【示例 3】 下 面 代码 可 以 直观 演示 每 个 表达 式 与 变量 n 的 值 并 非 都 同步 。 | 
Varn= 和 4 | 
alert(nt+t); 1/ 返回 4 | 
alert(H+n); / 返回 6。 在 递 加 之 前 ， 变 量 的 值 是 5， 而 不 是 4 | 全 办 


递增 运算 符 和 递减 运算 符 是 相反 操作 的 一 对 。 它 们 在 运算 之 前 都 会 试图 转换 值 为 数值 类 型 , 如果 | 


失败 则 返回 NaN。 | Note 
2.6 使 用 逻辑 运算 从 


迪 辑 运算 与 布尔 值 紧密 联系 , 也 称 布尔 代数 。 所谓 布尔 代数 就 是 布尔 值 (true 和 false) 的 “算术 ” 
运算 。 迪 辑 运 算 常 与 比较 运算 结合 使 用 ， 在 条 件 表达 式 中 经 常 使 用 。 
逻辑 运算 符 包 括 与 (&&)、 或 (|) 和 非 〈!) 3 种 类 型 。 


2.6.1 与 运算 


与 运算 符 (&&) 实际 上 就 是 两 个 运算 数 的 AND 布尔 操作 ， 只 有 当 两 个 条 件 都 为 tue 时 ， 它 才 | 


返回 tme， 和 否则 返回 hlse， 详 细 描述 如 表 2.4 所 示 。 | 
表 2.4 刘 辑 与 运算 符 | 

第 一 个 运算 数 的 布尔 值 第 二 个 运算 数 的 布尔 值 远 辑 与 运算 结果 | 

me | ue | 

me | false | 

false | false | 

false | re | false | 


与 运算 符 〈&&) 的 逻辑 解析 : 
首先 , 计算 第 一 个 运算 数 , 即 左 侧 表达 式 。 如 果 左 侧 表达 式 的 计算 值 可 以 被 转换 为 flse( 如 null、 
0、underfined 等 )， 那 么 就 会 结束 计算 ， 直 接 返 回 第 一 个 运算 数 的 值 。 
然后 ， 当 第 一 个 运算 数 的 值 为 tue 时 ， 则 将 计算 第 二 个 运算 数 的 值 ， 即 位 于 右 侧 的 表达 式 ， 并 返 | 
这 个 表达 式 的 值 。 
【示例 1】 下 面 代 码 利用 逻辑 与 运算 检测 变量 初始 值 。 
Var user / 定义 变量 
(Iuser && alert(" 没 有 赋值 ")); / 返回 提示 信息 “没有 赋值 
如 果 变 量 user 为 null， 则 user 就 会 返回 tue， 如 果 与 运算 符 左 侧 返回 值 为 tue， 则 会 执行 右 侧 的 
表达 式 ， 否 则 就 会 忽略 。 
即 与 运算 符 右 侧 的 表达 式 可 以 被 执行 ， 也 可 以 不 被 执行 。 对 于 上 面 表达 式 ， 使 用 条 件 语句 可 以 进 
行 如 下 表示 。 


加 


i /定义 变量 | 
这 useD { / 条 件 判断 | 
alert(" 变 量 没有 赋值 呀 "): | 
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【示例 2】 由 于 与 运算 符 右 侧 的 表达 式 将 根据 左 侧 表达 式 的 值 来 决定 是 否 执行 ， 在 程序 中 常 利用 
| 它 来 设计 结构 简洁 的 条 件 结构 。 


| 
A Varn=3; 
全] Deand)y 
(n= 2) && alert(2): 


G3 ee ae 


(ln) &e& alert("null"); 
| 

| 上 面 代码 等 价 于 下 面 的 多 条 件 结构 。 

| Var n=3; // 定义 变量 

| switch (n) { / 指定 判断 的 变量 
| case 1: / 条 件 1 

| alert(1); 

| break: / 结束 结构 

| case 2: / 条 件 2 

| alert(2): 

| break: // 结束 结构 

| Case 3: / 条 件 3 

| alert(3): 

| break: // 结束 结构 

| default: // 默认 条 件 

| alert("null"): 

| 

| } 

| 


| 为 了 安全 起 见 , 用 户 在 设计 时 必须 确保 迪 辑 与 左 侧 的 表达 式 返 回 值 是 可 以 预期 的 , 同时 右 侧 表达 
| 式 不 应 该 包含 赋值 、 递 增 、 递 减 和 函数 调用 等 有 效 运算 。 

| 人 逻辑 与 运算 的 运算 数 可 以 是 任意 类 型 数据 ， 如果 运算 数 不 是 布尔 值 ， 则 与 运算 并 非 要 求 必须 返 
| 布尔 值 ， 而 是 根据 表达 式 的 结果 实事 求 是 地 进行 返回 。 

| 【示例 3】 下 面 介绍 几 种 特殊 运算 数 应 用 技巧 。 

对 象 被 转换 为 布尔 值 时 为 rue。 例 如 ， 一 个 空 对 象 与 一 个 布尔 值 进行 迎 辑 与 运算 。 


| alert(typeoft{} && true)): // 返回 第 三 个 运算 数 te 的 类 型 ， 即 返回 boolean 

«alert(typeof({} && false)): // 返回 第 二 个 运算 数 false 的 类 型 ， 即 返回 boolean 

‘alert(typeofttrue &e& {})): // 返回 第 二 个 运算 数 {} 的 类 型 ， 即 返回 object 
alert(typeof(false && 人 / 返回 第 一 个 运算 数 false 的 类 型 ， 即 返回 boolean 


| 如 果 运 算数 中 包含 null， 则 返回 值 总 是 null。 例 如 ， 字 符 串 "null" 与 null 类 型 值 进 行 迪 辑 与 运算 ， 
| 不 管 位 置 如 何 ， 始 终 都 返回 null。 
| 


alert(typeof("null" && null)): // 返回 null 的 类 型 ， 即 返回 object 
alert(typeof(null && "null")): // 返回 null 的 类 型 ， 即 返回 object 


| 如 果 运 算数 中 包含 NaN， 则 返回 值 总 是 NaN。 例 如 ， 字 符 串 "NaN" 与 NaN 类 型 值 进 行 逻辑 与 运 
| 算 ， 不 管 位 置 如 何 ， 始 终 都 返回 NaN。 


aler(ypeof NAN" RE NA): // 返回 NaN 的 类 型 ， 即 返回 mumiber 
alert(typeof(NaN && "NaN")): // 返回 NaN 的 类 型 ， 即 返回 number 


| 回 对 于 Infinity 特殊 值 来 说 ， 将 被 转换 为 tue， 与 普通 数值 一 样 参 与 逻辑 与 运算 。 
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alert(typeof("Infinity" &é& Infinity)): 
// 返回 第 二 个 运算 数 Infinity 的 类 型 ， 即 返回 number 
alert(typeofInfinity &é& "Infinity")); 
// 返回 第 二 个 运算 数 "Infinity" 的 类 型 ， 即 返回 string | 
如 果 运算 数 中 包含 undefined， 则 返回 错误 。 例如， 字符 串 "undefined" 与 undefined 类 型 值 进 | 

行 罗 辑 与 运算 ， 不 管 位 置 如 何 ， 始 终 都 返回 undefined 的 类 型 undefined。 | 
alert(typeof("undefined" && undefined)): 
alert(typeofundefined && “undefined")); 


2.6.2 或 运算 符 


当 或 运算 符 ||) 左右 两 侧 运算 数 的 值 都 是 布尔 值 时 ， 则 它 将 执行 布尔 OR 操作 。 如 果 两 个 运 | 
算数 的 值 为 tue， 或 者 其 中 一 个 为 tue， 那 么 它 就 返回 true， 否 则 就 会 返回 false。 详 细 描 述 如 表 2.5 
所 示 。 


表 2.5 ”逻辑 或 运算 符 


第 一 个 运算 数 的 布尔 值 第 二 个 运算 数 的 布尔 值 逻辑 或 运算 结果 


或 运算 符 〈|) 的 逻辑 解析 如 下 。 

首先 ， 计 算 第 一 个 运算 数 。 如 果 左 侧 表达 式 的 计算 值 可 以 被 转换 为 que， 那 么 就 直接 返回 第 一 个 
运算 数 的 值 ， 忽 略 第 二 个 运算 数 ( 即 不 执行 )。 

然后 ， 当 第 一 个 运算 数 的 值 为 false 时 ， 则 将 计算 第 二 个 运算 数 的 值 ， 即 位 于 右 侧 的 表达 式 ， 并 | 
返回 这 个 表达 式 的 值 。 

【示例 】 针 对 下 面 4 个 表达 式 。 

Var n=3; 

(nC 1) && alert(1): 

m= 2) &e& alert(?): 

(n= 3) && alert(3): 

(ID) &e& alert("null"): 

可 以 使 用 网 辑 或 对 其 进行 合并 。 

Var n= 2; 

= 1) &e& alert (Mn = 2) &e& alert On =— 3) && alert(3) | (In) && alert("null"): 

由 于 与 运算 符 〈&&) 的 优先 级 高 于 或 运算 符 (||) 的 优先 级 ， 所 以 不 用 使 用 小 括号 。 不 过 使 用 小 
括号 运算 符 更 方便 阅读 。 

Var n= 2; 


(nm 1 && alert(D) ) | (m2) &e& alert?) | ((n — 3) && alert(3)) | (In) && alert"null")): 
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或 者 分 行书 写 。 

varn=2; 
(m= 1) &e& alert(1)) // 为 tme 时 ， 结 束 并 返回 值 
| (m=2) &e& alert(?)) // 为 true 时， 结束 并 返回 值 
|(m=3) &e& alert(3)) / 为 true 时 ， 结 束 并 返回 值 
| (C1 1) && alert("null")): // 为 tme 时 ， 结 束 并 返回 值 


| 如 果 或 运算 符 的 运算 数 不 是 布尔 值 ， 但 是 仍然 可 以 将 它 看 作 布尔 OR 的 操作 ， 也 不 管 运算 数 的 值 
| 是 什么 类 型 ， 都 可 以 被 转换 为 布尔 值 。 


2.6.3 非 运算 符 
非 运算 符 (!) 是 一 元 运算 符 ， 直 接 放 在 运算 数 之 前 ， 将 对 运算 数 执行 布尔 取 反 操作 (NOT)， 并 


返回 布尔 值 。 

| 【示例 1】 如 果 对 于 运算 数 执行 两 个 迎 辑 非 运算 操作 ， 实 际 上 它 相当 于 把 运算 数 转换 为 布尔 值 数 
| 据 类 型 。 
| alert(l5): // 返回 flse。 把 数值 5 转换 为 布尔 值 ， 并 取 反 
alertll5): // 返回 tmue。 把 数值 5 转换 为 布尔 什 

alert(l0): // 返回 mue。 把 数值 0 转换 为 布尔 值 ， 并 取 反 

alert(1!0); / 返回 ilse。 把 数值 5 转换 为 布尔 值 
| 
， 窑 提 示 : 过 辑 与 和 到 辑 或 运算 符 所 执行 的 操作 返回 的 未 必 都 是 布尔 值 ， 但 是 对 于 还 辑 非 运算 符 ， 它 
| 的 返回 值 一 定 是 布尔 值 。 

【示例 2】 下 面 列举 一 些 特殊 的 运算 数 的 逻辑 非 运算 返回 值 。 

| a: // 返回 全 se。 如 果 运 算数 是 对 象 ， 则 返回 false 
| alert(10: // 返回 true。 如 果 运算 数 是 0， 则 返回 true 

alert( ! (n=5)); // 返回 se。 如 果 运 算数 是 非 0 的 任何 数字 ， 则 返回 false 

alert( ! null); // 返回 true。 如 果 运 算数 是 null， 则 返回 true 

alert( ! NaN): // 返回 true。 如 果 运算 数 是 NaN， 则 返回 false 
| alert( ! Infinity): // 返回 false。 如 果 运算 数 是 Infinity， 则 返回 true 
alert(!(- Infinity)): 
”返回 钙 se。 如 果 运 算数 是 -Infinity， 则 返回 false 

alert( ! undefined): 


// 返回 tme。 如 果 运算 数 是 undefined， 则 返回 true， 在 早期 浏览 器 中 或 发 生 错误 


2.6.4 远 辑 运算 


| 对 于 与 (&&) 和 或 (|) 运算 符 来 说 ， 它 们 不 会 改变 运算 数 的 数据 类 型 ， 同 时 也 不 会 强制 旭 辑 运 

| 算 的 结果 是 什么 数据 类 型 ， 它 们 具有 如 下 特性 。 

| 在 逻辑 运算 时 ,与 和 或 运算 都 会 把 运算 数 视 为 布尔 值 , 即使 不 是 布尔 值 , 也 将 对 其 进行 转换 ， 

| 然后 根据 布尔 值 执行 下 一 步 的 操作 。 

风 辑 与 (&&) 和 迪 辑 或 (||) 运算 并 非 完 整地 执行 所 有 运算 数 ， 它 们 可 能 仅 执行 第 一 个 运算 
数 ， 从 而 忽略 第 二 个 运算 数 。 
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【示例 1】 在 下 面条 件 结构 中 ， 由 于 字符 串 变量 a 的 逻辑 值 可 以 转换 为 tue， 则 逻辑 或 运算 符 在 


执行 左 侧 的 a = "string" 赋 值 表 达 式 之 后 ， 就 不 再 执行 逻辑 或 运算 符 右 侧 的 定义 对 象 结构 体 。 所以, 最 
后 在 执行 条 件 结构 内 的 alert(b.a); 语 句 时 ， 就 会 返回 对 象 b 没有 定义 的 错误 提示 。 


if(a= "string" || (b= // 执行 逻辑 或 操作 | 
{ // 定义 对 象 结构 体 | 一 
a: "string" // 定义 对 象 的 属性 a 
D | Note 
) alert(b.a): // 调用 对 象 b 的 属性 a 


如 果 把 其 中 的 逻辑 或 运算 符 蔡 换 为 逻辑 与 运算 符 , 则 当 第 一 个 运算 数值 可 以 转换 为 tue 时 , 将 继 
续 执行 右 侧 的 运算 数 ， 该 运算 数 是 一 个 复杂 的 结构 体 ， 定 义 了 一 个 对 象 并 赋值 给 变量 b。 这 样 在 条 件 
结构 中 执行 对 象 调用 时 ， 会 显示 字符 串 "string"。 


if(la= "string" && (b = // 执行 逻辑 与 操作 
上 / 定义 对 象 结构 体 

a: "string" / 定义 对 象 的 属性 a | 

D | 

) alert(b.a): // 调用 对 象 b 的 属性 a， 返 回 字符 串 "string" | 


在 下 面 结构 中 ， 由 于 过 条 件 最 终 返 回 false， 所 以 不 管 对 象 b 是 否 被 定义 ， 最 后 并 没有 执行 调用 b 
对 象 的 属性 a 这 个 语句 。 


ifla=0 && (b= // 执行 逻辑 或 操作 
{ / 定义 对 象 结构 体 
a: "string" / 定义 对 象 的 属性 a 
) 
) alert(b.a); // 调用 对 象 b 的 属性 a， 没 有 被 执行 


通过 上 面 演示 示例 ， 可 以 看 到 过 和 辑 与 和 逻辑 或 运算 时 ， 并 没有 改变 运算 数 的 数据 类 型 ， 也 没有 改 
变 这 些 表达 式 的 值 ， 返 回 值 依然 保持 表达 式 的 运算 值 ， 而 不 是 被 转换 的 布尔 值 。 

【示例 2】 则 和 辑 与 和 罗 辑 或 是 两 个 相互 补充 的 逻辑 操作 ， 结 合 它们 可 以 设计 出 很 多 结构 复杂 而 又 | 
巧妙 的 逻辑 运算 表达 式 。 例 如 ， 下 面 结构 是 一 个 复杂 的 堪 套 结构 ， 它 根据 变量 a 的 布尔 值 来 判断 是 否 | 
执行 一 个 循环 体 。 


vara=b=2; / 定义 并 连续 初始 化 
这 a) { // 条件 结构 | 
while (b++< 10){ // 循环 结构 | 
alert(b+); // 循环 执行 语句 | 
} | 
| 
对 于 这 样 一 个 复 条 的 循环 结构 ， 可 以 使 用 逻辑 与 和 逻辑 或 运算 符 进行 简化 。 | 
vara=b=2: // 定义 并 连续 初始 化 


while (a && b++ < 10) alert(b++ ); / 循环 体 。 逻 辑 与 运算 符合 并 的 多 条 件 表达 式 
如 果 把 上 面 的 逻辑 运算 表达 式 转换 为 如 下 霸 套 结构 即 不 正确 。 


while (b++ <10) { / 先 执行 循环 | 
if(a) { / 再 判断 条 件 | 
alert(b++); | 

} | 

} | 
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因为 在 a && b++ < 10 这 个 逻辑 与 表达 式 中 可 能 会 存在 这 样 一 种 情况 :如果 风 辑 与 运算 符 左 侧 的 


| 运算 数 返 回 值 为 false， 那 么 就 不 再 继续 执行 逻辑 与 运算 符 右 侧 的 运算 数 。 


2.7 使 用 关系 运算 符 


关系 运算 符 也 称 为 比较 运算 符 , 它 反 映 了 运算 数 之 间 关 系 的 一 类 运算 , 因此 这 类 运算 符 一 般 都 是 


| 二 元 运算 符 ， 关 系 运 算 返回 的 值 总 是 布尔 值 。 


2.7.1 大 小 比较 
大 小 关系 的 比较 运算 以 及 对 应 运算 符 说 明 如 表 2.6 所 示 。 
表 2.6 基本 比较 运算 
说 明 
如 果 第 一 个 运算 数 小 于 第 二 个 运算 数 , 则 比较 运算 的 返回 值 为 true。 否则 比较 运算 的 返回 值 为 false 
如 果 第 一 个 运算 数 小 于 等 于 第 二 个 运算 数 ， 则 比较 运算 的 返回 值 为 tue。 和 否则 比较 运算 的 返回 值 
为 false 
如 果 第 一 个 运算 数 大 于 等 于 第 二 个 运算 数 ， 则 比较 运算 的 返回 值 为 re。 否则 比较 运算 的 返回 值 
为 false 
如 果 第 一 个 运算 数 大 于 第 二 个 运算 数 , 则 比较 运算 的 返回 值 为 true。 否则 比较 运算 的 返回 值 为 false 
比较 运算 中 的 运算 数 不 局 限于 数值 ， 可 以 是 任意 类 型 的 数据 。 但 是 在 执行 运算 时 ， 它 主要 根据 数 
值 的 大 小 ， 以 及 字符 串 中 字符 在 字符 编码 表 中 的 位 置 值 来 比较 大 小 。 所 以 对 于 其 他 类 型 的 值 ， 将 会 被 
转换 为 数字 或 字符 串 ， 然 后 再 进行 比较 。 
【示例 】 在 比较 运算 中 ， 运 算数 的 转换 操作 规则 说 明 如 下 。 
如 果 运 算数 都 是 数字 ， 或 者 都 可 以 被 转换 成 数字 ， 则 将 根据 数字 大 小 进行 比较 。 
alert(4 > 3): / 返回 tme， 直 接 利用 数值 大 小 进行 比较 
alert("4" > Infinity): / 返回 false， 无 穷 大 比 任何 数字 都 大 
但 是 对 于 下 面 代码 ， 就 比较 特殊 。 两 个 运算 数 虽然 都 可 以 被 转换 为 数字 , 但 是 由 于 它们 都 是 字符 
串 ， 则 不 再 执行 数据 类 型 转换 ， 而 是 直接 根据 字符 串 进行 比较 。 
alert("4"> "3"); / 返回 tue， 以 字符 串 进行 比较 ， 而 不 是 数字 大 小 进行 比较 
如 果 运 算数 都 是 字符 串 ， 或 者 都 被 转换 为 字符 串 ， 那 么 将 根据 字符 在 字符 编码 表 中 的 位 置 大 小 进 


| 行 比较 。 同 时 字符 串 是 区 分 大 小 写 的 ， 因 为 大 小 写字 符 在 表 中 的 位 置 不 同 。 一 般 小 写字 符 大 于 大 写字 


符 。 如 果 比 较 中 不 区 分 大 小 写 ， 则 建议 使 用 toLowerCase0 或 toUpperCase0 方 法 把 字符 串 统 一 为 小 写 
或 大 写 形式 。 


alert("a" > "b"): / 返回 false， 字 符 a 编码 为 61， 字 符 b 编码 为 62 
alert("ab" > "cb"): / 返回 false，< 的 编码 为 63 。 从 左 到 右 对 字符 串 中 对 应 字符 逐个 进行 比较 
alert("abd" > "abe"): / 返回 tue，d 的 编码 为 64。 前 面 字符 相同 ， 则 比较 下 一 个 字符 
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如 果 一 个 运算 数 是 数字 ， 或 者 被 转换 为 数字 ， 另 一 个 是 字符 串 ， 或 者 被 转换 为 字符 串 ， 则 比较 运 
算 符 调用 parseInt() 将 字符 串 强 制 转换 为 数字 ， 不 过 对 于 非 数字 字符 串 来 说 ， 将 被 转换 为 NaN 值 ， 最 
后 以 数字 方式 进行 比较 。 运 算数 是 NaN， 则 比较 结果 为 false。 

alert("a" > "3"); / 返回 tme， 字 符 a 编码 为 61， 字 符 3 编码 为 33 

alert("a" > 3); / 返回 flse， 字 符 a 被 强制 转换 为 NaN 

如 果 运 算数 都 无 法 转换 为 数字 或 字符 串 ， 则 比较 结果 为 false。 

回 如果 一 个 运算 数 为 NaN， 或 者 被 转换 为 NaN， 则 始终 返回 false。 

回 ”如 果 对 象 可 以 被 转换 为 数字 或 字符 串 ， 则 执行 数字 或 字符 串 比 较 。 


2.7.2 包含 检测 


in 运算 符 能 够 判断 左 侧 运算 数 是 否 为 右 侧 运算 数 的 成 员 。 其 中 左 侧 运 算数 应 该 是 ”图 
一 个 字符 串 ， 或 者 可 以 转换 为 字符 串 的 表达 式 ， 右 侧 运算 数 则 应 该 是 一 个 对 象 或 数组 。 
考虑 到 当前 学 习 阶段 ， 读 者 还 不 熟悉 什么 是 对 象 和 数组 ， 因 此 本 节 内 容 以 选 学 方 ” 曾 吕 路 江 
式 在 线 呈现 ， 感 兴趣 的 读者 可 以 扫 码 阅读 ， 后 面 章节 还 会 深入 讲解 。 线 上 阅读 


2.7.3 等 值 检测 


JavaScript 提供 了 4 个 等 值 检测 运算 符 : 全 等 (===) 和 不 全 等 (!==)、 相 等 (==) 和 不 相等 (!= ) ， 
详细 说 明 如 表 2.7 所 示 。 


表 2.7 等 值 运算 | 
比较 运算 符 说 ”有明 | 
一 (相等 比较 两 个 运算 数 的 返回 值 ， 看 是 否 相等 | 
上 = (不 相等 ) 比较 两 个 运算 数 的 返回 值 ， 看 是 否 不 相等 | 
一 (全 等 ) 比较 两 个 运算 数 的 返回 值 ， 看 是 否 相 等 ， 同 时 检测 它们 的 数据 类 型 是 否 相等 
! 一 (不 全 等 ) | 。 比较 两 个 运算 数 的 返回 值 ， 看 是 否 不 相等 ， 同 时 检测 它们 的 数据 类 型 是 否 不 相 竺 


在 相等 运算 中 ， 一 般 遵 照 以 下 基本 规则 进行 比较 。 

如 果 运 算数 是 布尔 值 ， 在 比较 之 前 先 转换 为 数值 。 其 中 false 转 为 0，true 转换 为 1。 

如 果 一 个 运算 数 是 字符 串 ， 另 一 个 运算 数 是 数字 ， 在 比较 之 前 先 尝试 把 字符 串 转 换 为 数字 。 
如 果 一 个 运算 数 是 字符 串 ， 另 一 个 运算 数 是 对 象 ， 在 比较 之 前 先 尝试 把 对 象 转换 为 字符 串 。 
如 果 一 个 运算 数 是 数字 ， 另 一 个 运算 数 是 对 象 ， 在 比较 之 前 先 尝试 把 对 象 转换 为 数字 。 

如 果 两 个 运算 数 都 是 对 象 , 那么 比较 它们 的 引用 值 ( 引 用 地 址 ) 。 如 果 指向 同一 个 引用 对 象 ， 
则 相等 ， 否 则 不 等 。 

【示例 1】 下 面 是 一 些 特殊 运算 数 的 比较 。 


办 办 办 办 


alert("1" 一 1): // 返回 tme。 字 符 串 被 转换 为 数字 

alert(tme 一 1): // 返回 tme。true 被 转换 为 1 

alert(false 一 0): // 返回 tue。false 被 转换 为 0 | 
alert(null 一 0): // 返回 false | 
alert(undefined 一 0): // 返回 他 se | 
alert(undefined — null): // 返回 tme | 
alert(NaN — "NaN"): // 返回 ilse | 
alert(NaN 一 1): // 返回 false L 
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1/ 返回 false 
/ 返回 tme 
NaN 与 任何 值 都 不 相等 ， 包 括 它 自己 。null 和 undefined 值 相 等 ， 但 是 它们 是 不 同类 型 的 数据 。 
| 在 相等 比较 中 ， null 和 undefined 是 不 允许 被 转换 为 其 他 类 型 的 值 。 
| 【示例 2】 下 面 两 个 变量 的 值 虽 然 是 通过 计算 得 到 ， 但 是 它们 的 值 相 等 。 

| varb="a"+ "bcd"; 
alert(a 一 b): // 返回 tme 
| 对 于 值 类 型 的 数据 而 言 ， 数值 和 布尔 值 的 相等 比较 运算 效果 比较 高 ， 但 是 字符 串 需要 消耗 大 量 次 
| 源 ， 因 为 字符 趾 需 要 逐个 字符 进行 比较 ， 才 能 够 确定 它们 是 否 相等 
| 在 全 等 运算 中 ， 一 般 遵照 如 下 基本 规则 进行 比较 。 
| 回 ”如果 运 算数 都 是 值 类 型 ， 则 只 有 数据 类 型 相同 ， 且 数值 相等 时 才能 够 相同 。 

回 ”如 果 一 个 运算 数 是 数字 、 字 符 串 或 布尔 值 〈 值 类 型 )》， 另 一 个 运算 数 是 对 象 等 引用 类 型 ， 则 
| 它们 肯定 不 相同 。 
”加 ”如 果 两 个 对 象 ( 引 用 类 型 》 比 较 ， 则 比较 它们 的 引用 地 址 。 
| 【示例 3】 下面 是 特殊 运算 数 的 全 等 比较 。 


【示例 4】 对 于 引用 类 型 的 值 进 行 比较 ， 主 要 比较 引用 的 地 址 是 否 相 同 ， 而 不 是 比较 它们 的 值 。 
var a=new String("abcd"); // 定义 字符 串 "abcd" 对 象 
varb = new String("abcd"): / 定义 字符 串 "abcd" 对 象 
| alert(a — b); // 返回 false 
| alert(a — b); // 返回 false 
| 
在 上 面 示例 中 ， 两 个 对 象 的 值 相等 ， 但 是 它们 的 引用 地 址 不 同 ， 所 以 它们 既 不 相等 ， 也 不 全 等 。 
| 对 于 引用 类 型 的 值 来 说 , 相等 (一 ) 和 全 等 (===) 运算 符 操作 的 结果 相同 ， 没有 本 质 区 别 。 
【示例 5】 对 于 值 类 型 而 言 ， 只 要 类 型 相同 ， 值 相等 ， 它 们 就 应 该 完全 全 等 ， 这 里 不 需要 考虑 比 
， 较 运算 数 的 表达 式 数据 类 型 变化 ， 也 不 用 考虑 变量 的 引用 地 址 。 
vara="]1"+1; 
varb="11"; 


alert(a —b): // 返回 tue 


| alert(null — undefined) : // 返回 生 se 

| alert(0 = "0"); // 返回 false 

| alert(0 — false); / 返回 false 

| 下 面 是 两 个 对 象 的 比较 ， 由 于 它们 都 引用 相同 的 地 址 ， 所 以 返回 true。 
| vara=0 

| varb=a; 

| alert(a —=b); // 返回 true 

| 但 是 对 于 下 面 两 个 对 象 ， 虽 然 它们 的 结构 相同 ， 由 于 地 址 不 同 ， 所 以 也 不 全 等 。 
vara={: 

| varb={}; 

| alert(a —b); // 返回 flse 

| 

| 
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表达 式 (a>blla 一 b 与 表达 式 (a >=b) 并 不 完全 相等 。 


vara=1; 
varb=2; 


alert((a>blla 一 b) 二 (a>=b)); // 返回 tme， 此 时 似乎 相等 


如 果 为 变量 a 和 b 分 别 赋 值 为 null 和 undefined， 则 返回 值 为 包 lse， 说 明 这 两 个 表达 式 并 非 完全 | 


等 价 。 


var a= null; 


var b = undefined:; 


alert((a>blla 二 b) 二 (a>=b); // 返回 false， 表达 式 的 值 并 非 相等 
因为 null==undefined 等 于 true， 所 以 (a > b || a 一 b) 表 达 式 返 


undefined 返 


器 


值 为 false。 


值 就 为 true。 但 是 表达 式 null>= 


2.8 使 用 赋值 运算 符 


赋值 是 一 种 运算 ， 习 惯 上 称 之 为 赋值 语句 。 


Var a.b; 
a=null; 


b = undefined; 


赋值 运算 符 的 左 侧 运算 数 必须 是 变量 、 对 象 属性 或 数组 元 素 。 


/ 定义 变量 
/ 给 变量 赋值 
/ 给 变量 赋值 


【示例 1】 下 面 的 写法 是 不 对 的 ， 因 为 左 侧 的 值 是 一 个 直接 量 ， 是 不 允许 操作 的 。 
// 返回 错误 
JavaScript 提供 了 两 种 类 型 的 赋值 运算 符 : 简单 赋值 运算 符 (=) 和 附加 操作 的 赋值 运算 符 。 
简单 的 赋值 运算 符 ， 就 是 把 右 侧 的 运算 数 的 值 直 接 复制 给 左 侧 变量 。 

附加 操作 的 赋值 运算 符 ,就 是 赋值 之 前 还 要 对 右 侧 运算 数 执行 某 种 操作 ,然后 再 复制 ， 详 细 说 明 


1= 100; 


如 表 2.8 所 示 。 
表 2.8 ”附加 操作 赋值 运算 符 

赋值 运算 符 说 了 明 示例 转 化 
+= 加 法 运算 或 连接 操作 并 赋值 a+=b a=a+b 
一 减法 运算 并 赋值 a-=b a=a-b 
= 乘法 运算 并 赋值 a*=b a=a*b 
上 = 除法 运算 并 赋值 a/=b a=a/b 
%= 取 模 运算 并 赋值 a%=b a=a%b 
<<= 左 移 位 运算 并 赋值 a<<=b a=a<<b 
>>= 右 移 位 运算 并 赋值 a>>=b a=a>>b 
>>>= 无 符号 右 移 位 运算 并 赋值 a>>>=b a=a>>>b 
&= 位 与 运算 并 赋值 a&=b a=a&b 
E 位 或 运算 并 赋值 aFb a=alb 
a 位 异 或 运算 并 赋值 ab a=a^b 
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【示例 2】 由 于 赋值 运算 符 可 以 参与 表达 式 运 算 ， 用 户 可 以 设计 很 多 复杂 的 赋值 操作 ， 如 连续 赋 


值 表达 式 。 
vara=b=c=d=e=f= 100: / 连续 赋值 
鲜 | 由 于 赋值 运算 符 是 从 右 向 左 进行 计算 ， 所 以 连续 赋值 运算 并 不 会 发 生 错误 。 
在 条 件 表达 式 中 进行 赋值: 
| for (vara=1,b=10:a<b:at+){ / 在 条 件 表达 式 中 进行 赋值 操作 
| alert(a); 


【示例 3】 在 下 面 这 个 复杂 的 表达 式 中 ， 风 辑 与 左 侧 的 运算 数 是 一 个 赋值 表达 式 ， 右 侧 的 运算 数 
也 是 一 个 赋值 表达 式 。 但 是 左 侧 仅 是 一 个 简单 的 数值 赋值 , 而 右 侧 的 是 把 一 个 函数 对 象 赋值 给 了 变量 
b。 在 逻辑 与 运算 中 ， 左 侧 的 赋值 并 没有 真正 的 复制 给 变量 a， 当 逻辑 与 运算 执行 右 侧 的 表达 式 时 ， 
该 表达 式 是 把 一 个 函数 赋值 给 变量 b， 然 后 利用 小 括号 运算 符 调用 这 个 函数 ， 返 回 变量 a 的 值 ， 结 果 
并 没有 返回 变量 a 的 值 为 6， 而 是 undefined。 


| 运 7 定义 变量 a 
«alert(a =6 && (b= function0 { // 逻辑 与 运算 表达 式 
| retum a; // 返回 变量 a 的 值 
po 
六 // 结果 返回 Undefined 


由 于 赋值 运算 作为 表达 式 使 用 具有 副作用 ， 即 它 能 够 改变 变量 的 值 。 因 此 在 使 用 时 要 慎重 ， 确 保 
不 要 引发 潜在 的 危险 。 经 过 上 面 示例 代码 ,可 以 看 到 赋值 运算 符 参 与 表达 式 运算 时 给 变量 a 带 来 了 不 
| 可 预测 的 返回 值 。 因 此 ， 对 于 上 面 表达 式 ， 更 安全 的 写法 如 下 所 示 。 


vara= 6: / 定义 并 初始 化 变量 a 
| b=fnction0{ // 定义 函数 对 象 b 
| Tetum a; 
| 
有 
alert(a && bO): / 利用 逻辑 与 运算 ， 根 据 a 的 逻辑 值 ， 决 定 是 否 调用 函数 b 


| 2.9 使 用 对 象 抬 作 运算 从 


对 象 操作 运算 符 主要 是 指 对 对 象 、 数 组 、 函 数 执行 特定 任务 操作 的 一 组 运算 符 ， 
主要 包括 in、instanceof、new、delete、. (点 号 )、[] (中 括号 ) 和 0 (小 括号 ) 运算 符 。 
: 考虑 到 在 当前 学 习 阶 段 ， 读 者 还 不 熟悉 什么 是 对 象 和 数组 ， 因 此 本 节 以 选 学 方式 
线 上 阅读 ”在 线 呈现 ， 感 兴趣 的 读者 可 以 扫 码 阅读 ， 后 面 章 节 还 会 深入 讲解 。 


2.10 使 用 位 运算 符 


JavaScript 定义 了 7 个 位 运算 符 ， 可 以 分 为 以 下 两 类 。 
| 逻辑 位 运算 符 : 位 与 (&) 、 位 或 〈|) 、 位 异 或 〈^) 和 位 非 (一 ) 。 
J 移 位 运算 符 : 左 移 (<<) 、 右 移 (>>) 和 无 符号 右 移 (>>>) 。 
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2.10.1 认识 位 运算 


位 运算 就 是 对 二 进 制 数 进行 的 计算 。 

位 运算 是 整数 的 逐 位 运算 。 例 如 ，1+1=2， 这 在 十 进 制 计算 中 是 正确 的 ; 但 是 在 二 进 制 计算 中 ， 
1+1= 10; 而 对 于 二 进 制 数 100 去 反 ， 则 就 等 于 001， 而 不 是 -100。 

在 JavaScript 中 ,位 运算 要 求 运算 数 必须 是 32 位 的 整数 ,如 果 位 运算 数 是 非 整 型 ， 
或 者 大 于 32 位 的 整数 ， 则 将 返回 NaN。 

考虑 到 位 运算 的 使 用 频率 比较 低 ， 且 对 于 初学 者 来 说 不 容易 理解 。 过 早 学 习 ， 容 。 冰 和 E 
易 挫 伤 学 习 热 情 ， 因 此 本 节 被 列 为 选 学 内 容 在 线 呈 现 ， 感 兴趣 的 读者 可 以 扫 码 阅读 。 线 上 阅读 


2.10.2 ”逻辑 位 运算 


他 辑 位 运算 符 与 逻辑 运算 符 的 运算 方式 相同 , 但 是 针对 的 对 象 不 同 。 迪 辑 位 运算 符 针 对 的 是 二 进 
制 的 整数 值 ， 而 风 辑 运算 符 针对 的 是 非 二 进 制 的 其 他 类 型 数据 。 

& 运 算 符 ( 位 与 ) 表示 布尔 AND 操作 。 它 对 二 进 制 值 逐 位 进行 比较 ， 并 返回 一 
个 二 进 制 值 的 结果 。 

考虑 到 迪 辑 位 运算 的 使 用 频率 比较 低 ， 且 对 于 初学 者 来 说 比较 艰 涩 ， 因 此 把 本 节 
列 为 选 学 内 容 在 线 呈现 ， 感 兴趣 的 读者 可 以 扫 码 阅读 。 


2.10.3” 移 位 运算 

移 位 运算 就 是 对 二 进 制 值 进行 有 规律 移 位 ， 移 位 运算 可 以 设计 很 多 奇妙 的 效果 ， 
这 在 图 形 图 像 编 程 中 应 用 比较 广泛 。 

考虑 到 移 位 运算 的 使 用 频率 比较 低 ， 且 对 于 初学 者 来 说 比较 艰 涩 ， 因 此 把 本 节 列 
为 选 学 内 容 在 线 呈 现 ， 感 兴趣 的 读者 可 以 扫 码 阅读 。 


2.11 使 用 其 他 运算 从 


下 面 介绍 其 他 没有 分 类 的 运算 符 。 这些 运算 符 在 程序 中 经 常 使 用 ， 也 是 非常 重要 。 没 有 介绍 到 的 | 
运算 符 ， 将 在 本 书 其 他 章节 涉及 ， 读 者 也 可 以 参考 JavaScript 参考 手册 系统 了 解 。 


2.11.1 条 件 运 算 符 


条 件 运算 符 与 条 件 语句 在 逻辑 上 相同 。 但 条 件 运算 符 侧重 于 连续 运算 ， 它 自身 可 以 作为 表达 式 ， 
也 可 以 作为 子 表达 式 使 用 ;而 条 件 语句 侧重 于 逻辑 结构 ， 在 结构 中 执行 不 同 的 运算 。 条 件 运 算 符 拥 有 
函数 式 特性 ， 而 条 件 语句 具有 面向 对 象 的 编程 结构 。 

条 件 运算 符 是 JavaScript 唯一 的 三 元 运算 符 ， 语 法 形式 如 下 。 

a2?X:Y 

其 中 a、x、y 是 它 的 3 个 运算 数 。a 运算 数 必须 是 一 个 布尔 型 的 表达 式 ， 即 返回 值 必须 是 一 个 布 
尔 值 ， 一 般 使 用 比较 表达 式 来 表示 。x 和 y 是 任意 类 型 的 值 。 如 果 运 算数 a 返回 值 为 tue 时 ， 将 执行 
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| x 运算 数 ， 并 返回 该 表达 式 的 值 。 如 果 运 算数 a 返回 值 为 false 时 ， 将 执行 了 运算 数 ， 并 返回 该 表达 式 


| 的 值 。 
| 
| 【示例 】 定 义 变量 a, 然后 检测 a 是 否 被 赋值 , 如 果 赋 值 则 使 用 该 值 , 否则 使 用 默认 值 给 它 赋值 。 
人 | // 定义 变量 a 
| a? (a=a): (a="Default Value"); // 检测 变量 a 是 否 赋值 


a DR 
| 条 件 运算 符 可 以 转换 为 条 件 语 句 : 
vara: 
if(a) // 赋值 
aa; 
else // 没有 赋值 
a= "default value"; 
alert(a); 
条 件 运算 符 也 可 以 转换 为 逻辑 表达 式 如 下 。 
Vara; 
a && (a=a) | (a = "default value"): // 逻辑 表达 式 
alert(a); 
| 在 上 面 表达 式 中 ， 如 果 a 为 tue， 则 执行 a=a) 表 达 式 ， 执 行 完毕 就 不 再 执行 逻辑 或 运算 符 后 面 的 
| (a = "default value") 表 达 式 ， 如 果 a 为 false， 则 不 再 执行 逻辑 与 运算 符 后 面 的 (a=a) 表 达 式 ， 同 时 将 不 
| 再 继续 执行 逻辑 或 运算 符 前 面 的 表达 式 a && (a=a), 转 而 执行 逻辑 或 运算 符 后 面 的 表达 式 (a = "default 


| value)。 


窑 提示 :上 面 代码 仅 是 演示 , 在 实战 中 用 户 需要 考虑 假 值 的 影响 . 因为, 当 变量 赋值 0.nullundefined、 
NaN 等 假 值 时 ， 它 们 被 转换 为 逻辑 值 也 是 false。 


2.11.2 ”逗号 运算 符 


号 运算 符 是 二 元 运算 符 ， 它 能 够 先 执行 运算 符 左 侧 的 运算 数 ， 然 后 再 执行 右 侧 的 运算 数 ， 最 后 
| 可 二 站 和 的 信人 为 果 返 回 。 
【示例 1】 喜 号 运算 符 可 以 实现 连续 声明 多 个 变量 并 赋值 。 
vara=1,b=2,c=3,d=4: 
它 等 于 : 
vara= 1; 
Var b=2; 
Var c=3; 
| Var d= 后 
| 
| 多 个 逗号 运算 符 可 以 联 排 使 用 ， 从 而 设计 一 种 多 重 计算 的 功效 。 
| vara= b=2,c= d=4: 
与 条 件 运算 符 或 逻辑 运算 符 根据 条 件 来 决定 是 否 执行 所 有 或 特定 运算 数 不 同 , 逗号 运算 符 会 执行 
所 有 的 到 算数 但 并 非 返 回 所 有 运算 数 的 结果 ， 它 只 返回 最 后 一 个 运算 数 的 值 。 
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【示例 2】 在 下 面 代码 中 ， 变 量 a 的 值 是 逗号 运算 之 后 ， 通 过 第 二 个 运算 数 c=2 的 执行 结果 赋值 
得 到 。 第 一 个 运算 数 的 执行 结果 没有 返回 ， 但 是 这 个 表达 式 被 执行 了 。 


a=(=1.c-2); / 连续 执行 和 赋值 
alert(3): / 返回 2 
alert(b); / 返回 1 
alert(c): 1/ 返回 2 


逗号 运算 符 可 以 作为 仅 需 执行 表达 式 的 工具 ， 这 些 表达 式 不 需要 返回 值 ， 但 必须 要 运算 。 在 特定 | 
环境 中 ， 可 以 在 一 个 表达 式 中 包含 多 个 子 表达 式 ， 通 过 逗号 运算 符 仅 让 它们 全 部 执行 ， 而 不 用 返回 全 | 

部 结果 
[示例 3 在 下 面 代码 中 ，for 语句 的 条 件 表达 式 中 仅 能 够 包含 3 个 表达 式 ， 第 一 个 表达 式 是 初 
始 化 循环 值 ， 第 二 个 表达 式 是 布尔 值 ， 第 三 个 表达 式 是 循环 变量 的 递增 值 。 为 了 能 够 在 3 个 表达 式 中 
完成 各 种 计算 任务 ， 这 里 把 逗号 运算 符 发 挥 到 极致 。 但 是 ， 要 确保 在 第 二 个 循环 条 件 的 第 二 个 表达 式 | 
以 及 最 后 一 个 表达 式 返回 一 个 逻辑 值 ， 否 则 会 导出 循环 出 现 错误 。 | 
for(a=1,b=10,c=100: +tc.a<b:att.c—){ | 
alert(a * C); | 


} 


【示例 4】 逗号 运算 符 的 优先 级 是 最 低 的 。 在 下 面 代码 中 ， 赋 值 运 算 符 优先 于 逗号 运算 符 ， 也 就 
是 说 数值 1 被 赋值 给 变量 b 之 后 ， 继 续 赋值 给 变量 a， 最 后 才 执行 逗号 运算 符 。 


ble 2 / 连续 执行 和 赋值 
alert(a); / 返回 1 
alert(b); // 返回 1 
alert(c): / 返回 2 


2.11.3 void 运算 符 


void 是 一 元 运算 符 , 它 可 以 出 现在 任意 类 型 的 运算 数 之 前 , 执行 运算 数 , 却 忽略 运算 数 的 返回 值 ， 
结果 总 返回 一 个 undefined。 void 多 用 于 URL 中 执行 JavaSeript 表达 式 , 但 不 需要 表达 式 的 计算 结果 。 
【示例 1】 在 下 面 代码 中 ， 使 用 void 运算 符 让 表达 式 返回 undefined。 


vara=b=c=2; / 定义 并 初始 化 变量 的 值 

d=void(a —(@ *= (c+= 5))); / 执行 void 运算 符 ， 并 把 返回 值 赋予 变量 d 
alert(a): // 返回 -12 

alert(b): // 返回 14 

alert(c): / 返回 7 

alert(d): // 返回 undefined 


由 于 void 运算 符 的 优先 级 比较 高 (14)， 高 于 普通 运算 符 的 优先 级 ， 所 以 在 使 用 时 应 该 使 用 小 括 
号 明确 void 运算 符 操 作 的 运算 数 ， 避 免 发 生 错 误 。 
【示例 2】 在 下 面 两 行 代码 中 ， 由 于 第 一 行 代码 没有 使 用 小 括号 运算 符 ， 则 void 运算 符 优先 执 
行 ， 返 回 值 undefined 再 与 1 执行 减法 运算 ， 所 以 返回 值 为 NaN。 在 第 二 行 代码 中 由 于 使 用 小 括号 运 
算 符 明确 void 的 运算 数 ， 减 法 运算 符 先 被 执行 ， 然 后 再 执行 void 运算 ， 最 后 返回 值 是 undefined。 
alerttvoid2 — 1): // 返回 NaN 
alert(void(2 — 1D)): 1/ 返回 undefined 
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| 【示例 3】 在 下 面 代 码 中 ，undefined 是 一 个 变量 ， 由 于 void 运算 符 返回 值 是 undefined， 所 以 该 
| 变量 的 值 就 等 于 undefined。 由 于 早期 正 浏览 器 对 undefined 数据 类 型 支持 不 是 很 好 ， 如 果 直 接 调 用 
| undefined 就 会 出 错 ， 但 是 如 果 使 用 变量 undefined 来 代 蔡 直接 量 undefined 就 能 够 避 开 这 个 Bug。 


奥 - varundefined =void null: 
也 可 以 调用 一 个 空 函 数 ， 其 返回 值 为 undefined， 来 定义 变量 undefined。 
varmndefined = fnctionO OO: 
使 用 下 面 代码 来 定义 undefined 变量 。 


var undefined = void 0; 
【示例 4】void 运算 符 也 能 像 函数 一 样 使 用 ， 如 void(0) 也 是 合法 的 。 在 特殊 环境 下 一 些 复杂 的 语 
| 句 可 能 不 方便 使 用 void 关键 字形 式 ， 而 必须 要 使 用 void 的 函数 形式 。 


void(i=0): // 返回 undefined 
void(i=0, i+t); // 返回 undefined 


2.12 表 达 式 


表达 式 由 一 个 或 多 个 运算 符 或 运算 数组 成 。 它 可 以 计算 ， 并 且 需 返回 一 个 值 。 
【示例 1】 简 单 的 表达 式 就 是 一 个 直接 量 、 常 量 或 变量 。 


| 1 // 数值 直接 量 ， 计 算 之 后 返回 值 为 数值 1 

| "string" // 字符 串 直 接 量 ， 计 算 之 后 返回 值 为 字符 串 "string" 

| false // 布尔 直接 量 ， 计 算 之 后 返回 值 为 布尔 值 false 

| null /null 直接 量 ， 计 算 之 后 返回 值 为 直接 量 null 

| /regexp/ / 正则 表达 式 直接 量 ， 计 算 之 后 返回 值 为 正则 表达 式 自身 
| {a bminy} / 对 象 直接 量 ， 计 算 之 后 返回 值 为 对 象 自身 

| [| // 数组 直接 量 ， 计 算 之 后 返回 值 为 数组 自身 

| function(a.b) {fretum a+b} // 函数 直接 量 ， 计 算 之 后 返回 值 为 函数 自身 

| a / 变量 ， 计 算 之 后 返回 值 为 变量 存储 的 值 


| 上述 原始 的 表达 式 很 少 单独 使 用 。 一 般 情况 下 ， 表 达 式 由 运算 符 与 运算 数组 合 而 成 ， 运 算数 可 以 

| 包括 直接 量 、 变 量 、 函 数 返回 值 、 对 象 属性 值 、 对 象 方法 的 运行 值 、 数 组 元 素 等。 

| 表达 式 可 以 棋 套 ， 组 成 复杂 的 表达 式 。JavaSeript 在 解析 时 ， 先 计算 最 小 单元 的 表达 式 ， 然 后 把 

| 计算 的 值 参与 到 外 围 或 次 级 的 表达 式 运算 。 以 此 类 推 ， 从 而 实现 复杂 表达 式 的 运算 操作 。 

| 表达 式 一 般 遵循 从 左 到 右 的 运算 顺序 来 执行 计算 ， 但 是 也 受到 运算 符 的 优先 级 影响 。 同 时 为 了 主 
动 控制 表达 式 的 运算 顺序 ， 用 户 可 以 通过 小 括号 运算 符 提升 子 表达 式 的 优先 级 。 

例如 ， 表 达 式 1+2*3 可 以 是 子 表达 式 2*3 运算 之 后 ， 再 参与 与 1 的 加 法 运算 。 而 表达 式 (1+2)*3 

， 却 借助 小 括号 运算 符 提升 了 加 号 运算 符 的 优先 级 ,从 而 改变 了 地 加 的 执行 顺序 , 即 子 表达 式 1+2 运算 

| 之 后 ， 再 参与 与 3 的 乘法 运算 。 

| 
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容 提示 : 表达 式 的 形式 多 样 ,除了 上 述 原始 表达 式 外 ,常用 表达 式 还 有 : 对 象 和 数组 初始 化 表达 式 、 
函数 定义 表达 式 、 属 性 访问 表达 式 、 调 用 表达 式 、 创 建 对 象 表达 式 等 。 

同一 个 表达 式 如 果 稍 加 改动 就 会 改变 表达 式 的 运算 顺序 , 用 户 可 以 借助 这 个 技巧 来 优化 表达 式 的 | 
结构 ， 但 不 改变 表达 式 的 运算 顺序 和 结果 ， 以 提高 代码 的 可 读 性 。 | 

【示例 2】 对 于 下 面 这 个 复杂 表达 式 ， 可 能 会 让 人 迷惑 。 

(a+b>c&&a-b<cla>b>c) 

如 果 进 行 如 下 优化 ， 则 逻辑 运算 的 顺序 就 非常 清楚 。 

(ar+b>o9&&(a-b<eclla>b>c) 

虽然 增加 这 些小 括号 并 没有 影响 到 表达 式 的 实际 运算 ， 但 更 方便 阅读 。 使 用 小 括号 运算 符 来 优化 
表达 式 内 部 的 逻辑 层次 ， 是 一 种 好 的 设计 习惯 。 

但 是 在 复杂 表达 式 中 , 一 些 不 良 的 多 辑 结构 与 人 的 思维 结构 相悖 ,也 会 影响 人 对 代码 的 阅读 和 思 
考 ， 这 时 就 应 该 根据 人 的 思维 习惯 来 优化 表达 式 的 逻辑 结构 。 

【示例 3】 设 计 一 个 表达 式 ， 筛 选 学 龄 人 群 。 如 果 使 用 表达 式 来 描述 就 是 年 龄 大 于 等 于 6 岁 ， 且 
小 于 18 岁 的 人 。 


iflage >= 6 && age <18) { 
// 学 龄 期 人 群 行为 


} 

直观 阅读 ， 表 达 式 age>=6 && age<18 可 以 很 容易 被 每 一 个 人 所 理解 。 但 是 继续 复杂 化 表达 式 ， 
筛选 所 有 弱势 年 龄 人 和 群 , 以 便 在 购 票 时 实施 半价 优惠 。 如 果 使 用 表达 式 来 描述 就 是 年 龄 大 于 等 于 6 岁 ， 
且 小 于 18 岁 ， 或 者 年 龄 大 于 等 于 65 岁 的 人 。 


iflage >=6&&age<181age>=65){ 
// 所 有 弱势 年 龄 人 群 行为 


) | 
从 逻辑 上 分 析 ， 上 面 表 达 式 没有 错误 。 但 是 在 结构 上 分 析 就 感觉 比较 模糊 ， 为 此 用 户 可 以 使 用 小 | 
括号 来 分 隔 逻辑 结构 层次 ， 以 方便 阅读 。 | 
(age >= 6 && age < 18) ||age >= 65){ | 
// 所 有 弱势 年 龄 人 群 行为 
但 是 ， 此 时 如 果 使 用 人 的 思维 来 思考 条 件 表 达 式 的 逻辑 顺序 时 ， 会 发 现 它 很 紊乱 ， 与 人 的 一 般 思 
维 发 生 了 错位 。 人 的 思维 是 一 种 线性 的 、 有 联系 的 、 有 参照 的 一 种 思维 品质 ， 如 图 2.1 所 示 。 


所 有 弱势 年 龄 人 群 所 有 弱势 年 龄 人 群 


[1 人 
人 的 思维 品质 
6 


18 65 


图 2.1 人 的 思维 模型 图 
而 对 于 表达 式 (age >= 6 && age < 18) || age >= 65 来 说 ， 它 的 思维 品质 如 果 使 用 模型 图 来 描述 ， 则 
如 图 2.2 所 示 。 通过 模型 图 的 直观 分 析 , 会 发 现 该 表达 式 的 逻辑 是 非 线 性 的 , 呈现 多 线 思 维 的 交叉 型 ， 
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| 这 种 思维 结构 对 于 机 器 计算 来 说 基本 上 没有 任何 影响 。 但 是 对 于 人 脑 思维 来 说 ， 就 需要 停顿 下 来 认真 
| 思考 之 后 ， 才 能 够 把 这 个 表达 式 中 的 表达 式 逻 辑 单元 串联 在 一 起 ， 形 成 一 个 完整 的 逻辑 线 。 


表达 式 的 思维 品质 
所 有 弱势 年 龄 人 群 
6 18 65 
Se shed dd 


I 6 18 65 


| | 所 有 弱势 年 龄 人 群 
6 18 


65 


图 2.2 该 表达 式 的 思维 模型 图 


| 直观 分 析 ， 这 个 逻辑 结构 的 错乱 是 因为 随意 混用 大 于 号 、 小 于 号 等 运算 符 造成 的 。 如 果 调 整 一 下 
| 表达 式 的 结构 顺序 ， 则 阅读 起 来 就 会 非常 清晰 。 
(if(6 age && age <18)165 <—age) { 
| / 所 有 弱势 年 龄 人 群 行为 
| 这 里 采用 了 统一 的 大 于 小 于 号 方式 , 即 所 有 参与 比较 的 项 都 按 着 从 左 到 右 、 从 小 到 大 的 思维 顺序 
| 进行 排列 。 而 不 再 恪守 变量 始终 居 左 ， 比 较 值 始终 居 右 的 编写 习惯 。 
【示例 4】 表 达 式 的 另 一 个 难点 就 是 布尔 型 表达 式 的 重 登 所 带 来 的 理解 障碍 。 
例如 ， 对 于 下 面 这 个 条 件 表达 式 ， 该 如 何 进 行 思维 。 
if!(!isA | !isB) { 
// 真 真 假 假 迷惑 人 
} 
| 对 上 述 表达 式 进 行 优化 ， 以 方便 阅读 。 
| 
| (LisA1 !isB) =! (isA && isB) 
| (!isA &e& !isB) =! (isA ||isB) 
| 【示例 5】?: 运 算 符 在 函数 式 编程 中 使 用 频率 比较 高 。 但 是 这 种 连续 思维 不 容易 阅读 。 这 时 可 以 
| 使 用 站 语句 对 ?: 运 算 符 表达 式 进行 分 解 。 
例如 ， 下 面 这 个 复杂 表达 式 ， 如 果 不 仔细 进行 分 析 ， 很 难 理 清 它 的 逻辑 顺序 。 
vara.b=new c(a.d? a.e(1): af(1)) 
但 是 使 用 条 件 语 句 之 后 ， 则 风 辑 结构 就 非常 清晰 。 
Rt 
| var ab =new c(a.e(1)): 
| jelse { 
Var ab = new c(a.f(0)): 
} 
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2.13 严格 模式 


ECMAScript 5 新 增 严格 运行 模式 。 顾名思义 ， 严 格 模式 就 是 使 JavaSeript 在 更 严格 的 条 件 下 运 | 
行 。 包 括 正 10 在 内 的 主流 浏览 器 都 已 经 支持 它 ， 许 多 大 项 目 已 经 开始 全 面 拥抱 它 。 定 义 严格 模式 的 
目的 如 下 。 | 

加 ”消除 JavaScript 语法 的 一 些 不 合理 、 不 严谨 之 处 ， 减 少 一 些 怪异 行为 。 

回 ”消除 代码 运行 的 一 些 不 安全 之 处 ， 保 证 代码 运行 的 安全 。 | 

回 “提高 编译 器 效率 ， 增 加 运行 速度 。 | 

为 未 来 新 版 本 的 JavaScript 做 好 铺垫 。 | 


< 注意 : 使 同样 的 代码 ， 在 严格 模式 中 ， 可 能 会 有 不 一 样 的 运行 结果 。 一些 在 正常 模式 下 可 以 运行 
的 语句 ,在 严格 模式 下 将 不 能 运行 . 掌握 这 些 内 容 , 有 助 于 更 细致 深入 地 理解 JavaScript。 


启用 严格 模式 很 简单 ， 只 要 在 代码 首部 加 入 如 下 注释 字符 串 即 可 。 
"use strict" 
不 支持 该 模式 的 浏览 器 会 把 它 当 作 一 行 普通 字符 串 ， 加 以 忽略 。 
严格 模式 有 两 种 应 用 场景 : 一 种 是 全 局 模式 ， 另 一 种 是 局 部 模式 。 
1. 全 局 模式 
将 "use strict" 放 在 脚本 文件 的 第 一 行 ， 则 整个 脚本 都 将 以 严格 模式 运行 。 如 果 这 行 语句 不 在 第 一 
行 ， 则 无 效 ， 整 个 脚本 将 以 正常 模式 运行 。 如 果 不 同 模式 的 代码 文件 合并 成 一 个 文件 ， 这 一 点 需要 特 
别 注意 。 
严格 地 说 ， 只 要 前 面 不 是 产生 实际 运行 结果 的 语句 ，"use strict" 可 以 不 在 第 一 行 。 | 
【示例 1】 下 面 代码 表示 ， 一 个 网 页 中 依次 有 两 段 JavaSeript 代码 。 前 一 个 <scripf> 标 签 是 严格 模 | 
式 ， 后 一 个 不 是 。 
<script> 
"use strict"; 
console.log(" 这 是 严格 模式 。"): 
scrip> 


<script> 
console.log(" 这 是 正常 模式 。"): 
</script> 
2. 局 部 模式 
【示例 2】 将 "use strict" 放 到 函数 内 的 第 一 行 ， 则 整个 函数 将 以 严格 模式 运行 。 
function strictO { 
"use strict"; 
retum "这 是 严格 模式 。"; 
} 
function notStrictO { 
Tetum "这 是 正常 模式 。"; 
} 
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3. 模块 模式 

因为 全 局 模式 不 利于 文件 合并 ,所 以 更 好 的 做 法 是 ,借用 局 部 模式 的 方法 ,将 整个 脚本 文件 放 在 
一 个 立即 执行 的 匿名 函数 中 。 

【示例 3】 如 果 定 义 一 个 模块 或 者 一 个 库 ， 可 以 采用 一 个 匿名 函数 自 执行 的 方式 进行 设计 。 


回 "use strict" 前 有 代码 。 


回 "use strict" 前 有 空 语句 。 


| 


当然 ，"use strict" 前 加 注释 是 可 以 的 。 


| 


第 2 章 JavaScript 基本 语法 5 
【拓展 】 
严格 模式 是 限制 性 更 强 的 JavaScript 精 编 版 ， 旨 在 改善 JavaScript 的 性 能 和 纠 错 
功能 ,与 常规 的 JavaScript 语义 不 同 ,其 解析 机 制 更 为 严谨 ,有 关 严 格 模式 对 JavaScript | 
语法 和 行为 限制 性 规定 ， 请 扫 码 阅读 。 ! 


2.14 案例 实战 


本 节 将 以 案例 的 形式 ， 帮 助 读者 集中 突破 在 学 习 JavaScript 基本 语法 过 程 中 可 能 遇 到 的 难点 和 重 | 
点 知识 点 。 


2.14.1 完善 类 型 检测 接口 


使 用 typeof 运算 符 可 以 检测 简单 的 值 ， 但 在 复杂 运算 环境 中 ，typeof 运算 符 是 无 法 胜任 的 。 本 节 | 
将 自 定义 toString() 方 法 ， 完 善 类 型 检测 接口 。 


< 人 i 注 意 : 在 学 习 之 前 ， 读 者 需要 掌握 Object、objecttoString0 和 Function 的 一 些 基本 知识 和 使 用 技 
巧 ， 否 则 建议 跳 过 本 节 示 例 ， 等 学 习 完 对 象 和 函数 章节 之 后 ， 再 回 退 补 学 。 


使 用 toString0 方 法 可 以 设计 一 种 更 安全 的 检测 JavaScript 数据 类 型 的 方法 ,用户 还 可 以 根据 开发 
需要 进一步 补充 检测 类 型 的 范围 。 

【设计 思路 】 

首先 ， 仔 细 分 析 不 同类 型 对 象 的 toString0 方 法 返回 值 ， 会 发 现 由 Object 对 象 定义 的 toString0 方 
法 返回 的 字符 串 形式 总 是 如 下 所 示 。 

[object class] 


其 中 ，object 表示 对 象 的 通用 类 型 ，class 表示 对 象 的 内 部 类 型 ， 内 部 类 型 的 名 称 与 该 对 象 的 构造 
函数 名 对 应 。 例 如 ，Array 对 象 的 class 为 Array，Function 对 象 的 class 为 Function，Date 对 象 的 class 
为 Date， 内 部 Math 对 象 的 class 为 Math， 所 有 Error 对 象 (包括 各 种 Error 子 类 的 实例 ) 的 class 
为 Error。 

客户 端 JavaScript 的 对 象 和 由 JavaScript 实现 定义 的 其 他 所 有 对 象 都 具有 预定 义 的 特定 class 值 ， 
如 Window、Document 和 Form 等 。 用 户 自 定义 对 象 的 class 为 Object。 

class 值 提供 的 信息 与 对 象 的 constructor 属性 值 相似 ， 但 是 class 值 是 以 字符 串 的 形式 提供 这 些 信 
息 的 ， 这 在 特定 的 环境 中 是 非常 有 用 的 。 如 果 使 用 typeof 运算 符 来 检测 ， 则 所 有 对 象 的 class 值 都 为 
Object 或 Function， 所 以 不 能 够 提供 有 效 信息 。 

但 是 ， 要 获取 对 象 的 class 值 的 唯一 方法 是 必须 调用 Object 的 原型 方法 toString0， 因 为 很 多 类 型 
对 象 都 会 重 置 Object 的 toString0 方 法 ， 所 以 不 能 直接 调用 对 象 的 toString0 方 法 。 

例如 ， 下 面 对 象 的 toString() 方 法 返回 的 就 是 当前 UTC 时 间 字 符 串 ， 而 不 是 字符 串 [object Date]。 

var d= new Date():; 

alert(d.toStringO): // 返回 当前 UTC 时 间 字符 串 

调用 Object 的 toString0 原 型 方法 ， 可 以 通过 调用 Objectprototype.toString 对 象 的 默认 toString0 
函数 ， 再 调用 该 函数 的 apply0 方 法 在 想 要 检测 的 对 象 上 执行 即 可 。 例 如， 结合 上 面 的 对 象 4， 具 体 实 
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| 现代 码 如 下 。 
vard=new Date0: 


var m = Object.prototype.toString: 
贪 内 | alert(m.apply(d)): // 返回 字符 串 "[object Date]" 


| 【实现 代码 】 
明白 了 上 面 的 技术 细节 ， 下 面 就 是 一 个 比较 完整 的 数据 类 型 安全 检测 方法 源 代码 。 
| // 安全 检测 JavaScript 基本 数据 类 型 和 内 置 对 象 
/ 参数 : o 表示 检测 的 值 
// 返回 值 ， 返 回 字符 串 "undefined"、"number"、"boolean"、"string"、"function"、 
"Tegexp"、"array"、"date"、"error"、"object" 或 "null" 
function typeOfo){ 
Var _toString = Object.prototype.toString; 
// 获取 对 象 的 toString0 方 法 引用 
// 列举 基本 数据 类 型 和 内 置 对 象 类 型 ， 还 可 以 进一步 补充 该 数组 的 检测 数据 类 型 范围 
var_type={ 
"undefined": "undefined". 
"number": "number", 
"boolean": "boolean", 
"string": "string", 
| "[object Function]": "function", 
| "[object RegExp]": "regexp", 
| "[object Array]": "array", 
"[object Date]": "date"、 
"[object Error]": "error" 


| 
| retum type[typeofo] || type[ toString.call(o)] || (0 ? "object" : "null"): 
| // 通过 把 值 转换 为 字符 串 ， 然 后 匹配 返回 字符 串 中 是 否 包含 特定 字符 进行 检测 


| 【应 用 示例 】 
| var a= Math.abs; 
| alert(typeOfa)): // 返回 字符 串 "function" 
| 上 述 方法 适用 于 JavaScript 基本 数据 类 型 和 内 置 对 象 ， 但 是 对 于 自 定义 对 象 无 效 。 因 为 自 定义 对 
| 象 被 转换 为 字符 串 后 ， 返 回 的 值 没 有 规律 ， 且 不 同 浏览 器 返回 值 也 不 同 。 因 此 ， 如 果 要 检测 非 内 置 对 
| 象 ， 只 能 够 使 用 constructor 属性 和 instaceof 运算 符 来 实现 。 
| 

【拓展 】 

对 于 对 象 、 数 组 等 复杂 数据 ， 可 以 使 用 Object 对 象 的 constructor 属性 进行 检测 。 
constructor 表示 构造 器 , 该 属性 值 引用 的 是 构造 当前 对 象 的 函数 。 由 于 涉及 后 面 章节 知 
识 点 ， 我 们 把 它 列 为 选 学 内 容 ， 供 读者 参考 ， 感 兴趣 的 读者 请 扫 码 阅读 。 
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1. 使 用 加 号 运算 符 


当 值 与 空 字符 串 相 加 运算 时 ，JavaScript 会 自动 把 值 转换 为 字符 串 。 
把 数字 转换 为 字符 串 。 

var a= 123456; 

a=at+"™, 


alert(typeof a): // 返回 类 型 为 string 
回 ”把 布尔 值 转换 为 字符 串 ， 返 回 字符 串 "true" 或 "false"。 


Var a= true; | 
a=a+""; | 
alert(a): // 返回 字符 串 "true" | 
把 数组 转换 为 字符 串 ， 返 回 数组 元 素 列表 ， 以 逗号 分 隔 。 | 
var a=[1,2,3]; | 
a=a+""; | 
alert(a): / 返回 字符 串 "1.2.3" | 
把 函数 转换 为 字符 串 ， 返 回 函数 结构 的 代码 字符 串 。 | 
var a= function| { 

Tetum 1; | 
| 
a=a+t+"" | 
alert(a): / 返回 字符 串 "var a = functionO{ retum 1:}" 


如 果 把 JavaScript 内 置 对 象 转换 为 字符 串 ， 则 只 返回 构造 函数 的 基本 结构 代码 ， 而 自 定义 的 构造 | 
函数 ， 则 与 普通 函数 一 样 ， 返 回 函数 结构 的 代码 字符 串 。 | 
| 


a=Date+""; | 
alert(a); // 返回 字符 串 " function Date 0 { [native code ]}" | 
如 果 内 置 对 象 为 静态 函数 ， 则 返回 字符 串 不 同 。 例 如 : 
a= Math+"™":; | 
alert(a); // 返回 字符 串 "[object Math ]" | 


如 果 把 对 象 实例 转换 为 字符 串 , 则 返回 的 字符 串 会 根据 不 同类 型 或 定义 对 象 的 方法 和 参数 而 不 同 ， | 
其 体 说 明 如 下 。 
对 象 直接 量 ， 则 返回 字符 串 为 "[object object]"。 
vara={ 
mu 


9 
a=a+t 


alert(a): // 返回 字符 串 "[object object]" 
如 果 是 自 定义 类 的 对 象 实例 ， 则 返回 字符 串 为 "[object object]"。 


var a =new functionO {}0: 
a=a+""; 


alert(a): // 返回 字符 串 "[object object]" 
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如 果 是 内 置 对 象 实 例 ， 具 体 返回 字符 串 必须 根据 传递 的 参数 而 定 。 
【示例 】 正 则 表达 式 对 象 会 返回 匹配 模式 字符 串 ， 时 间 对 象 会 返回 当前 GMT 格式 的 时 间 字 符 
串 ， 数 值 对 象 会 返回 传递 的 参数 值 字符 串 或 者 0 等 。 


食 内 | a=new [NWS/) + 
re alert(a); // 返回 字符 串 A\wS/" 


Tote 国 汪 


| 加 号 运算 符 有 两 个 计算 功能 : 数值 求 和 、 字 符 串 连接 。 但 是 字符 串 连接 操作 的 优先 级 要 大 于 求 和 
| 运算 。 因此， 在 可 能 的 情况 下 ， 即 运算 元 的 数据 类 型 不 一 致 时 ， 加 号 运算 符 会 尝试 把 数值 运算 元 转换 
| 为 字符 申 ， 再 执行 连接 操作 。 
但 是 当 多 个 加 号 运算 符 位 于 同一 行 时 ， 这 个 问题 就 比较 复杂 。 例 如 : 
vara=1+1+"a"; 
varb="a"+1+1; 
alert(a): // 返回 字符 串 "2a" 
| alert(b); // 返回 字符 串 "all" 
| 
| 通过 上 面 示例 可 以 看 到 ， 加 号 运算 符 不 仅仅 优先 于 连接 操作 ， 同 时 还 会 考虑 运算 的 顺序 。 对 于 变 
| 量 a 来 说 ， 按 从 左 到 右 的 运算 顺序 ， 加 号 运算 符 会 执行 求 和 运算 ， 然 后 再 执行 连接 操作 。 但 是 对 于 变 
| 量 b 来 说 ， 由 于 "a" + 1 表达 式 运算 将 根据 连接 操作 来 执行 ， 所 以 返回 字符 串 "al"， 然 后 再 用 这 个 字符 
串 与 数值 1 进行 运算 ， 再 次 执行 连接 操作 ， 最 后 返回 字符 串 "a11"， 而 不 是 字符 串 "a2"。 

如 果 要 避免 此 类 现象 的 发 生 ， 可 以 考虑 使 用 小 括号 运算 符 来 改变 一 行内 表达 式 的 运算 顺序 。 
例如 : 

varb="a"+(1+1):; // 返回 字符 串 "a2" 


2. 使 用 toString() 方 法 


当 为 原始 值 调用 toString0 方 法 时 ，JavaScript 会 自动 把 它们 装 箱 为 对 象 。 然 后 再 调用 toString() 方 
法 ， 把 它们 转换 为 字符 串 。 例 如 : 


| Var a= 123456; 

| a.toString(); 

| alert(a): // 返回 字符 串 "123456" 

| 使 用 加 号 运算 符 转换 字符 串 ， 实 际 上 也 是 调用 toString0 方 法 来 完成 。 只 不 过 是 JavaScript 自动 调 
”用 tostring0 方 法 实现 的 。 


< 注意 : JavaScript 能 够 自动 转换 变量 的 类 型 。 在 自动 转换 中 ，JavaScript 一 般 遵 循 : 根据 运算 的 类 

| 型 环境 ， 按 需要 进行 转换 。 例 如 ， 如 果 在 执行 字符 串 连接 操作 时 ， 则 会 把 数字 转换 为 字符 

| 串 ;如果 在 执行 基本 数学 运算 时 , 则 会 尝试 把 字符 串 转 换 为 数值 ; 如果 在 逻辑 运算 环境 中 ， 
则 会 尝试 把 值 转换 为 布尔 值 等 。 


2.14.3 ”转换 为 数字 


JavaScript 提供 了 两 种 静态 函数 把 非 数字 的 原始 值 转换 为 数字 : parseInt0 和 parseFloat0 。 其 中 
parseInt0 可 以 把 值 转换 为 整数 ， 而 parseFloat0 可 以 把 值 转换 为 浮 点 数 。 
| parseInt0 和 parseFloatO 函 数 对 字符 串 类 型 的 值 有 效 , 其 他 类 型 的 值 调用 这 两 个 函数 都 会 返回 NaN。 
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在 转换 字符 串 为 数字 之 前 ， 它 们 都 会 对 字符 串 进 行 分 析 ， 以 验证 转换 是 否 继续 ， 具 体 分 析 如 下 。 
1. 使 用 parselnt() | 
在 开始 转换 时 ，parseInt0 函 数 会 先 查看 位 置 0 处 的 字符 ， 如 果 该 位 置 不 是 有 效 数字 ， 则 将 返回 | ; 
NaN， 不 再 深入 分 析 ; 如果 位 置 0 处 的 字符 是 数字 ， 则 将 查看 位 置 1 处 的 字符 ， 并 进行 同样 的 测试 ， 
依 此 类 推 ， 在 整个 验证 过 程 中 , 直到 发 现 非 数字 字符 为 止 ,此 时 parseInt0 函 数 将 把 前 面 分 析 合 法 的 数 [EC 
字 字 符 转 换 为 数值 ， 并 返回 。 例 如 : 


alert(parseInt("123abe")); // 返回 数字 123 
alert(parseInt("1.73")):; // 返回 数字 1 
alert(parseInt(".123")):; // 返回 值 NaN 


浮 点 数 中 的 点 号 对 于 parseInt0 函 数 来 说 是 属于 非法 字符 的 ， 因 此 不 会 转换 它 ， 并 返回 。 

如 果 以 0 为 开头 的 数字 ， 则 parseInt0 函 数 会 把 它 作 为 八进制 数字 处 理 ， 先 把 它 转 换 为 数值 ,然后 
再 转换 为 十 进 制 的 数字 返回 ， 如 果 以 0x 为 开头 的 数字 字符 串 ， 则 parseInt0 函 数 会 把 它 作 为 十 六 进 制 
数字 处 理 ， 先 把 它 转 换 为 数值 ， 然 后 再 转换 为 十 进 制 的 数字 返回 。 


var d=010; // 八进制 数字 字符 串 
Var e= "0x10"; // 十 六 进 制 数字 字符 串 
alert(parseInt(d)): // 返回 十 进 制 数字 8 
alert(parseInt(e)): // 返回 十 进 制 数 字 16 


parseIntO 也 支持 基 模 式 , 可 以 把 二 进 制 、 八 进 制 、 十 六 进 制 等 不 同 进 制 的 数字 字符 串 转换 为 整数 。 
基 模 式 由 parseInt0 函 数 的 第 二 个 参数 指定 。 
【示例 1】 下 面 代码 把 十 六 进 制 数字 字符 串 "123abe" 转 换 为 十 进 制 整数 。 


var a="123abc": | 
alert(parseInt(a,16)): // 返回 值 十 进 制 整数 1194684 | 
下 面 代码 把 二 进 制 、 八 进 制 和 十 进 制 数字 字符 串 转换 为 整数 。 | 
alert(parseInt("10",2)): /1/ 把 二 进 制 数字 10 转换 为 十 进 制 整数 为 2 | 
alert(parseInt("10".8)): // 把 八进制 数字 10 转换 为 十 进 制 整数 为 8 | 
alert(parseInt("10",10)): // 把 十 进 制 数字 10 转换 为 十 进 制 整数 为 10 | 

| 


如 果 第 一 个 参数 是 十 进 制 的 值 ， 包含 0 前 级 ， 为 了 避免 被 误解 为 八进制 的 数字 ， 则 应 该 指定 第 二 
个 参数 值 为 10， 即 显 式 定义 基 ， 而 不 是 采用 默认 大 。 例 如 : 


alert(parseInt("010")): // 把 默认 基数 字 010 转换 为 十 进 制 整数 为 10 
alert(parseInt("010".8)): / 把 八进制 数字 010 转换 为 十 进 制 整数 为 8 
alert(parseInt("010".10)): // 把 十 进 制 数字 010 转换 为 十 进 制 整数 为 10 


2. 使 用 parseFloat() 函 数 


parseFloatO 函 数 与 parseIntO 函 数 用 法 基本 相同 。 但 是 它 能 够 识别 第 一 个 出 现 的 小 数 点 号 ， 而 第 二 
个 小 数 点 号 被 视 为 非法 的 。 


alert(parseFloat("1.232.5")): // 返回 数值 1.234 


【示例 2】 数字 必须 是 十 进 制 形式 的 字符 串 ， 不 能 够 使 用 八进制 或 十 六 进 制 的 数字 字符 串 。 同 
时 对 于 数字 前 面 的 0 (八进制 数字 标识 ) 会 忽略 ， 对 于 十 六 进 制 形 式 的 数字 ， 则 返回 0 值 。 


alert(parseFloat("123")): // 返回 数值 123 
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alert(parseFloat("123abc")): // 返回 数值 123 
| alert(parseFloat("010")): // 返回 数值 10 
| alert(parseFloat("Ox10")): // 返回 数值 0 
| alert(parseFloat("x10"): // 返回 数值 NaN 


3. 使 用 乘 号 运算 符 

加 号 运算 符 不 仅 能 够 执行 数值 求 和 运算 ， 还 可 以 把 字符 串 连 接 起 来 。 由 于 Javaseript 处 理 字符 中 
连接 操作 的 优先 级 要 高 于 数字 求 和 运算 。 因 此 ， 当 数字 字符 串 与 数值 使 用 加 号 连接 时 ， 将 优先 执行 连 

接 操作 ， 而 不 是 求 和 运算 。 例 如 : 


vara=1; 1/ 数值 
varb="1"; / 数字 字符 串 
alert(atb); / 返回 字符 串 "11" 


在 执行 表达 式 atb 的 运算 时 ， 变 量 a 先 被 转换 为 字符 串 ， 然 后 以 求 和 进行 计算 ， 所 以 计算 结果 为 
字符 串 "11"， 而 不 是 数值 >。 因此 ， 我 们 常常 使 用 加 号 运算 符 把 一 个 值 转换 为 字符 串 。 
不 过 ， 如 果 让 变量 b 乘 以 1， 则 加 号 运算 符 就 以 求 和 进行 计算 。 例 如 : 


Vara=1; // 数值 
varb= "1 / 数字 字符 串 
alert(a + (b * 1)); // 返回 数值 2 


| 如 果 让 一 个 数字 字符 串 变 量 乘 以 1， 则 JavaScript 解释 器 能 够 自动 把 数字 字符 串 转换 为 数值 ， 然 
| 后 再 继续 求 和 运算 ， 而 不 是 进行 字符 串 连 接 操作 。 


2.14.4 ”转换 为 数字 形式 字符 串 


Number 扩展 了 toString( 方 法 ， 人 允许 传递 一 个 整数 参数 ， 该 参数 可 以 设置 数字 的 显示 模式 。 数 字 
| 默认 为 十 进 制 显示 模式 ， 通 过 设置 参数 可 以 改变 数字 模式 。 
(1) 如 果 采 用 默认 模式 ， 则 toString0 方 法 会 直接 把 数值 转换 为 数字 字符 串 。 例 如 : 


| var a = 1.000:; 

| varb= 0.0001: 

| Varc= 1e-4: 

| alert(atoStringO): / 返回 字符 串 "1" 

| alert(b.toString(O)): // 返回 字符 串 "0.0001" 
alert(ctoStringO): // 返回 字符 串 "0.0001" 


toString0 方 法 能 够 直接 输出 整数 和 浮 点 数 ， 保 留 小 数位 。 小 数位 末尾 的 零 会 被 清除 。 但 是 对 于 科 
学 记 数 法 ， 则 在 条 件 许可 的 情况 下 把 它 转换 为 浮 点 数 ， 否 则 就 使 用 科学 记 数 法 方式 输出 字符 串 。 例 如 : 

vara= le-14: 

alert(atoStringO): / 返回 字符 串 "le-14" 

在 默认 模式 下 ， 无 论 数值 采用 什么 模式 ，toString( 方 法 返回 的 都 是 十 进 制 的 数字 。 因 此 ， 对 于 八 
进 制 、 二 进 制 或 十 六 进 制 数值 ，toString0 方 法 都 会 先 把 它们 转换 为 十 进 制 数值 之 后 再 输出 。 例 如 : 


vara=010: / 八进制 数值 10 
| var b= 0x10: / 十 六 进 制 数值 10 
| alert(a.toStringO); / 返回 字符 串 "8" 


| alert(b.toStringO)); / 返回 字符 串 "16" 
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(2) 如 果 设 置 参数 , 则 toString0 方 法 会 根据 参数 把 数值 转换 为 对 应 进 制 的 值 之 后 再 输出 。 例 如 : 


vara= 10: // 十 进 制 数 值 10 

alert(a.toString(2)): / 返回 二 进 制 数字 字符 串 "1010" 

alert(atoString(8)): / 返回 八进制 数字 字符 串 "12" 

alert(atoString(16)): // 返回 二 进 制 数 字 字符 串 "a" 
【拓展 】 


使 用 toString() 方 法 把 数值 转换 为 字符 串 时 ， 无 法 保留 小 数位 ， 这 在 货币 格式 化 、 科 学 记 数 等 
专业 领域 输出 显示 数字 是 不 方便 的 。 从 1.5 版 本 开始 ，JavaScript 定义 了 3 个 新 方法 : toFixed0、 
toExponential0 和 toPrecision() 。 


1. toFixed() 

toFixed( 方 法 能 够 把 数值 转换 为 字符 串 ， 并 显示 小 数 点 后 的 指定 位 数 。 例 如 : | 
vara= 10; | 
alert(a.toFixed(2)); // 返回 字符 串 "10.00" | 
alert(a.toFixed(4)): // 返回 字符 串 "10.0000" | 


2. toExponential() | 

toFixed0 方 法 不 采用 科学 记 数 法 ， 但 是 toExponential0 方 法 专门 用 来 把 数字 转换 为 科学 记 数 法 形 | 
式 的 字符 串 。 例 如 : | 

Vara=123456789: | 

alert(a.toExponential(2)): // 返回 字符 串 "1.23e +8" 

alert(a.toExponential(4)); // 返回 字符 串 "1.2346 e+8" 

toExponential() 方 法 的 参数 指定 了 保留 的 小 数位 数 。 省 略 的 部 分 采用 四 舍 五 入 的 方法 进行 处 理 。 

3. toPrecision() 

toPrecision0 与 toExponential() 方 法 不 同 ， 它 是 指定 有 效 数字 的 位 数 ， 而 不 仅仅 是 指 小 数位 数 。 
例如 : 


var a= 123456789: 
alert(a.toPrecision(2)): // 返回 字符 串 "1.2e+ 8" 
alert(a.toPrecision(4)): // 返回 字符 串 "1.235 e+8” 


2.14.5 ”转换 为 布尔 值 | 

在 JavaScript 中 ， 任 何 数据 都 可 以 被 自动 转换 为 布尔 值 ， 这 种 转换 往往 都 自动 完成 。 例 如 ， 把 值 | 人 
放 入 条 件 或 循环 结构 的 条 件 表达 式 中 ， 或 者 参与 罗 辑 运算 时 ，JavaScript 解释 器 都 会 自动 把 它们 转换 
为 布尔 值 。 可 以 手动 进行 转换 ， 具 体 方法 如 下 。 

1. 使 用 双重 逻辑 非 

任何 一 个 值 如 果 在 前 面 加 上 一 个 逻辑 非 运算 符 ，JavaScript 都 会 把 这 个 表达 式 看 作 是 逻辑 运算 。 
执行 运算 时 ， 先 把 值 转换 为 布尔 值 ， 然 后 再 执行 逻辑 非 运算 。 例 如 : 


var a=!0; // 返回 tme 
varb=1!1: // 返回 false 
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varc= INaN: // 返回 tme 

| vard= Inull: // 返回 true 

| vare= undefined: // 返回 tme 

Pe var f= ![]: / 返回 false 

全 /站 | var g=!{}:; / 返回 false 

| 如 果 再 给 这 个 表达 式 添加 一 个 逻辑 非 运算 符 , 所 得 的 布尔 值 就 是 该 值 被 转换 为 布尔 型 数据 的 真实 

Pe 
ay 

| vara=10: // 返回 false 

| varb=1!1; // 返回 true 

| var ¢ = !INaN; // 返回 false 

| var d= tnull: // 返回 false 

| var e = !lundefined: /1/ 返回 false 

| var f=!![]; // 返回 tme 

| var g=1{): / 返回 tme 


2. 使 用 Boolean() 构 造 函数 转换 
使 用 Boolean() 构 造 函数 转换 的 方法 如 下 。 


| Var a=0; 

| varb=1; 

| a=new Boolean(a); // 返回 false 

| b=new Boolean(b): // 返回 tme 

| 

| 不 过 这 种 方法 会 把 布尔 值 包装 为 引用 型 对 象 ， 而 不 再 是 原始 值 。 使 用 typeof 运算 符 检 测 如 下 。 
var a=0; 

| var b= !la; 

| Var ¢ = new Boolean(a); 

| alert(typeof b); // 返回 boolean 

| alert(typeof c): // 返回 object 


| 2.14.6 转换 为 对 象 


JavaScript 内 置 String、Number、Function、Boolean 等 类 型 的 对 象 构造 器 ， 它 们 是 
构造 JavaScript 对 象 系统 的 基础 。 

考虑 到 需要 后 面 章 节 的 知识 做 铺垫 ， 因 此 本 节 仅 作为 选 学 内 容 在 线 呈现 ， 感 兴趣 
线 上 阅读 ”的 读者 请 扫 码 阅读 。 


2.14.7 ”把 对 象 转换 为 值 


| 1. 对 象 在 逻辑 运算 环境 中 的 转换 
| 如 果 把 非 空 对 象 用 在 逻辑 运算 环境 中 ， 则 对 象 被 转换 为 tue。 这 包括 所 有 类 型 的 对 象 ， 即 使 是 值 
| 为 false 的 包装 对 象 也 为 true。 
2. 对 象 在 数值 运算 环境 中 的 转换 
| 如 果 对 象 用 在 数值 运算 环境 中 ， 则 对 象 会 被 自动 转换 为 数字 ， 如 果 转 换 失败 ， 则 返回 值 NaN。 


回 
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3. 数组 在 数值 运算 环境 中 的 转换 

当 数 组 被 用 在 数值 运算 环境 中 时 ， 数 组 将 根据 包含 的 元 素来 决定 转换 的 值 。 

4. 对 象 在 模糊 运算 环境 中 的 转换 

考虑 到 需要 后 面 章节 的 知识 做 铺垫 ， 因 此 本 节 仅 作 为 选 学 内 容 在 线 呈 现 ， 感 兴趣 
的 读者 请 扫 码 阅读 。 


2.14.8 ”强制 类 型 转换 


JavaScript 支持 使 用 下 面 方法 强制 类 型 转换 。 

Boolean(value): 把 参数 值 转换 为 boolean 型 。 

回 ”Number(value): 把 参数 值 转换 为 number 型 。 

String(value): 把 参数 值 转换 为 string 型 。 

考虑 到 需要 后 面 章节 的 知识 做 铺垫 ， 因 此 本 节 仅 作为 选 学 内 容 在 线 呈 现 ， 感 兴趣 
的 读者 请 扫 码 阅读 。 


2.15 强化 练习 


扎实 的 基础 是 深入 学 习 的 关键 ， 为 了 帮助 读者 顺利 度 过 JavaScript 语言 学 习 第 一 关 ， 本 节 强 化 了 
基本 语法 的 训练 ， 特 别 是 重点 知识 的 历练 。 但 是 限于 篇 幅 ， 本 节 内 容 以 在 线 方式 呈现 ， 供 读者 课 下 
练习 。 


2.15.1 求 值 


本 节 列 出 了 13 道 JavaScript 运算 的 训练 题 ， 感 兴趣 的 读者 请 扫 码 练习 。 
本 节 求 值 题 的 答案 以 及 解析 ， 请 扫 码 查看 。 


2.15.2 ”简单 编程 


本 节 列 出 了 4 道 JavaScript 简单 编程 题 ， 感 兴趣 的 读者 请 扫 码 练习 。 
具体 示例 代码 以 及 提示 ， 请 扫 码 查看 。 


2.15.3 ”表达 式 计算 


下 面 列 举 14 个 表达 式 ， 请 快速 计算 出 它们 的 值 。 感 兴趣 的 读者 请 扫 码 
练习 。 
答案 和 解析 ， 请 扫 码 查看 。 


2.15.4 ”表达 式 编程 


编写 一 个 求 和 函数 sam0， 具 体 说 明 请 扫 码 阅读 。 
答案 和 解析 ， 请 扫 码 查看 。 [DW 
线 上 阅读 7 线 上 阅读 8 
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JavaScript 程序 结构 设计 


结构 化 程序 设计 主要 分 为 3 种 沙 辑 结构 

顺序 结构 : 一 种 线性 、 有 序 的 结构 ， 它 依次 执行 各 语句 模块 

回 循环 结构 : 重复 执行 一 个 或 几 个 模块 ， 直 到 满足 某 一 条 件 为 止 

回 选择 结构 : 根据 条 件 成 立 与 否 选择 程序 执行 的 通路 

采用 结构 化 程序 设计 方法 ， 程 序 结构 清晰 ， 易 于 阅读 、 测 试 、 排 错 和 修改 。JavaScript 
提供 了 让 条 件 判 疡 语句 、switch 多 重 选择 语句 、for 循环 语句 、for-in 循环 语句 、while 循环 
语句 、do-while 循环 语句 、break 语句 、continue 语句 、retum 语句 等 来 实现 各 种 结构 化 流程 


设计 ， 本 章 将 分 别 对 这 些 语句 进行 详细 讲解 


【 学 习 重 点 】 


dl 


于 瑟瑟 


了 解 JavaScript 常用 语句 
灵活 设计 选择 结构 
灵活 设计 循环 结构 
正确 使 用 跳 转 语句 
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程序 都 是 由 一 个 或 多 个 语句 组 成 的 集合 。 语 句 表示 一 个 可 执行 的 命令 ， 用 来 完成 特定 的 任务 , 大 | 
部 分 语句 用 于 流程 控制 。 

从 结构 上 看 ，JavaScript 语句 可 以 分 为 单 句 和 复句 。 

单 名 一 般 由 一 个 或 多 个 关键 字 和 表达 式 构成 ， 用 来 完成 运算 、 赋 值 等 简单 任务 。 回 路 

回 ”复句 一 般 由 大 括号 构成 ， 用 来 设计 流程 结构 ， 控 制程 序 的 执行 顺序 。 

从 功能 上 看 , JavaScript 语句 可 以 分 为 声明 语句 、 表 达 式 语句 、 选 择 语 句 、 循 环 语句 、 le 
控制 语句 等 ， 详 细 说 明 请 扫 码 了 解 。 线 上 阅读 


3.1.1 表达 式 语 句 


语句 之 间 通 过 分 号 分 隔 ， 当 一 个 表达 式 单 独 一 行 显示 时 ， JavaScript 会 自动 补 加 分 号 。 任 何 表达 | 
式 加 上 分 号 ， 就 是 表达 式 语句 。 
【示例 1】 下 面 这 个 句子 仅 是 一 个 数值 直接 量 ， 它 是 最 简单 的 句子 ， 也 是 最 简单 的 表达 式 。 
E / 最 简单 的 句子 
【示例 2】 下 面 这 行 长 代码 是 一 个 赋值 语句 。 
o=new((o 一 "String")?String:(o 一 "Aray")?Array:(o 一 
"Number")?7Number:(0 一 "Math")?Math:(0 一 "Date")?Date:(0 一 
"Boolean")?Boolean:(0 一 "RegExp")?RegEXp:Objecb): 


如 果 格 式 化 显示 等 号 右 侧 的 代码 ， 它 就 是 一 个 多 重 选 择 结构 的 连续 运算 。 


new ((0 — "String")?String 
@ 一 "Array)?Armray 

(o 一 "Number")?Number 
(o 一 "Math")?Math 

(0 = "Date")?Date 

(0 = "Boolean")?Boolean 
(一 "RegExp")?RegExp 
Object): 


< 抽 注意 : 大 部 分 表达 式 语 名 都 具有 破坏 性 ， 完 成 任务 后 会 改变 变量 自身 的 值 ， 如 赋值 语句 、 函 数 调 
用 语句 、 变 量 声 明 语句 、 定 义 函 数 语句 等 。 


3.1.2 复合 语句 


一 个 或 多 个 句子 被 大 括号 括 起 来 ， 就 成 了 复合 语句 ， 也 称 为 语句 块 。 
【示例 1】 下面 的 条 件 结构 只 能 控制 第 一 个 句子 ， 第 二 个 句子 不 受 条 件 语句 的 控制 。 
这 false) 

alert( "Hello ): 

alert("World"): 


。61 。 


_ [sse 网 页 病程 从 入 门 到 精通 ( 币 课 精 编 县) 


| 如 果 使 用 大 括号 把 它们 包 于 在 一 起 ， 形 成 语句 块 ， 就 方便 控制 。 
| 

| 这 false) 
| 上 
alert("Hello"): 
alert("World"): 


te 
4 全 注意 : 大 括号 不 是 条 件 结构 的 必要 部 分 
| 复合 语句 来 尾 可 以 不 用 添加 分 号 ， 但 是 句子 之 间 必须 使 用 分 号 分 隔 ,大 括号 内 最 后 一 个 句子 可 以 
| 省 略 分 号 ， 因 为 它 不 会 产生 歧义 。 
| 【示例 2】 复合 语句 可 以 包含 子 句 ， 也 可 以 包含 复句 ， 形 成 结构 柑 套 。 对 于 赚 套 结构 可 以 通过 格 
| 式 化 排版 以 增强 代码 的 可 读 性 。 


// 空 复句 
} 


alert(" 单 复句"); 


alert("Hello, World! "); 


alert(" 复 句 嵌 套 "); 


var 和 function 都 是 声明 语句 。var 声明 变量 ，function 声明 函数 ， 可 以 在 程序 中 任意 位 置 使 用 。 


| 1. var 
| var 语句 用 来 声明 一 个 或 者 多 个 变量 ， 具 体 用 法 可 以 参考 第 2 章 。 
| 2. function 


使 用 function 可 以 声明 一 个 函数 。 
【示例 】 下 面 代码 使 用 function 语句 声明 一 个 名 称 为 f 的 函数 。 


function fO { 
alert(" 声 明 并 初始 化 函数 变量 "); 
} 


有 关 函 数 的 详细 讲解 ， 请 参考 后 面 章节 内 容 。 
3.1.4” 空 语句 


空 语句 就 是 包含 没有 任何 代码 的 句子 ， 它 只 有 一 个 分 号 (;)， 表 示 该 语句 的 结束 。 例 如 : 
| // 空 语句 
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空 语句 不 会 执行 任何 操作 ， 相 当 于 一 个 占 位 符 。 
【示例 】 在 循环 结构 中 使 用 空 语句 可 以 设计 空 循环 。 


for (vari=0;i< 10:i++) 


Eee Note 
上 面 代码 可 以 简写 为 : 

for (vari= 0;i< 10; it+ ); 

空 语句 易 引 发 异常 ， 安 全 的 方法 是 使 用 复合 语句 的 形式 来 表示 ， 或 者 加 上 注释 ， 避 免 遗 漏 。 
for (vari= 0;i< 10; it+ )/* 空 语句 由 


/ 或 者 
for (vari=0;i<10;it+){ 


2 
3.2 选择 结构 


选择 结构 在 程序 中 能 根据 预 设 的 条 件 ， 有 选择 地 执行 不 同 的 选择 命令 。JavaScript 选择 结构 主要 | 
使 用 站 语句 、else 站 语句 或 switch 语句 来 设计 。 
3.2.1 ji 语 名 


让 语句 的 语法 格式 如 下 。 | 视频 讲解 


让 是 关键 字 ， 表 示 条 件 命 令 ， 小 括号 作为 运算 符 ， 用 来 分 隔 并 计算 条 件 表达 式 的 值 。expression | 
表示 条 件 表达 式 ，statement 表示 单 句 ，statements 表示 复句 。 

条 件 结构 被 执行 时 ， 先 计算 条 件 表达 式 的 值 ， 如 果 返 回 值 为 tue， 则 执行 下 面 的 单 句 或 复句 ， 如 
果 返 回 值 为 false， 则 跳出 条 件 结构 ， 执 行 结构 后 面 的 代码 。 如 果 条 件 表达 式 的 值 不 为 布尔 值 ， 则 会 强 
制 转 换 为 布尔 值 。 

【示例 1】 下 面 代码 会 被 无 条 件 执行 。 

这 IJ) 

alert(" 条 件 为 真 !"): // 单 句 缩 进 格式 
让 语句 加 上 else 从 句 ， 可 以 设计 二 选 一 的 程序 结构 ， 其 语法 格式 如 下 。 


这 expression) 
<statement | statements> 
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else 
<statement | statements> 
如 果 表 达 式 expression 为 tue， 则 执行 else 前 面 的 句子 ， 否 则 执行 else 后 面 的 句子 。 
全 站 | 【示例 2】 下 面 代码 检测 null 值 的 真 假 。 
”fnull)alert("null 布尔 值 为 rue"); 


einal 布 作为 se 


如 果 else 从 句 为 一 个 条 件 结构 ， 可 以 设计 选择 嵌 套 结构 ， 但 是 在 使 用 时 应 避免 条 件 歧义 。 
【示例 1】 下 面 选 择 结构 是 错误 的 嵌 套 。 
这 0) 
这 1) 
alert(1): 


| else 

| alert(0): 

| 上 面 代码 如 果 不 借助 缩 进 版 式 ， 一 般 很 难 读 懂 其 中 的 迪 辑 层次 。JavaScript 解释 器 将 根据 就 近 原 
则 ， 按 如 下 风 辑 层次 进行 解释 。 


alert(0); 


alert(0): 


| 【示例 2】 在 多 层 嵌 套 结构 中 ,可 以 把 else 与 让 关键 字 结 合 起 来 ， 设 计 多 重 条 件 结构 。 下 面 代码 
| 是 三 层 条 件 嵌 套 结构 。 


格式 化 后 显示 如 下 。 

Vara=3; 

ifla—D) 

alert(1); 

else if(a 一 2) 

alert2): 

else ifa 一 3) 

alert(3): 

把 else 与 让 关键 字 组 合 在 一 行内 显示 ， 然 后 重新 缩 排 每 个 句子 。 整 个 嵌 套 结构 的 逻辑 思路 就 变 
得 更 清晰 : 如 果 变 量 a 等 于 1， 就 提示 1; 如 果 变量 a 等 于 2， 就 提示 2; 如 果 变量 a 等 于 3， 就 提示 
3， 依 此 类 推 。 

思考 一 个 问题 : 设计 4 个 条 件 ， 只 有 当 4 个 条 件 全 部 成 立时 ， 才 人 允许 执行 任务 。 

【示例 3】 遵循 一 般 设计 思路 ， 可 以 沿用 下 面 嵌 套 结构 来 设计 。 


ifla) { 
ifb) { 
ifO { 
ifd) { 
alert(" 所 有 条 件 都 成 立 !"); 
bh 
else{ 
alert(" 条 件 d 不 成 立 !"); 
} 
} 
lse { 
alert(" 条 件 < 不成立!"); 
} 
} 
else { 
alert(" 条 件 b 不 成 立 ! "); 
} 
: 
else { 
alert(" 条 件 a 不成立 !"): 
} 
【示例 4】 示例 3 的 设计 思路 没有 问题 ， 结 构 翌 套 也 合理 。 不 过 ， 可 以 对 站 结构 进行 优化 处 理 。 
ifla && b && ec R&Ad) { 
alert(" 所 有 条 件 都 成 立 ! "); 
上 


从 设计 意图 考虑 : 使 用 让 语句 逐个 检测 每 个 条 件 的 合法 性 ,并 对 某 个 条 件 是 否 成 立 进行 个 性 化 处 
理 ， 以 方便 跟踪 。 但 是 使 用 这 a && b && c && 四 条 件 表 达 式 ， 就 会 出 现 一 种 可 能 : 如 果 a 条 件 不 成 
立 ， 则 程序 会 自动 退出 整个 结构 ， 而 不 管 b。、c 和 d 的 条 件 是 否 成 立 。 

【示例 5】 也 可 以 采用 排除 法 ， 对 每 个 条 件 逐 一 进行 排除 ， 如 果 全 部 成 立 则 再 执行 任务 。 这 里 使 
用 了 一 个 布尔 型 变量 作为 钩子 把 每 个 让 条 件 结构 串 在 一 起 。 
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vart= true: // 初始 化 行为 变量 为 tue 
| 这 af 
| alert(" 条 件 a 不成立! 中 
| t=false: // 如 果 条 件 a 不成立， 则 行为 变量 为 false 
镶 - | ib) { 
et 
| t= false; / 如 果 条 件 b 不 成 立 ， 则 行为 变量 为 false 
| 上 
| 
| if(!o) { 
| alert(" 条 件 c 不 成 立 !"); 
| t= false; // 如 果 条 件 < 不 成 立 ， 则 行为 变量 为 false 
| 
RO { 
| alert(" 条 件 d 不 成 立 ! "); 
| t= false; // 如 果 条 件 d 不 成 立 ， 则 行为 变量 为 false 
} 
这 D { // 如 果 行 为 变量 为 mue， 则 执行 特定 事件 


alert(" 所 有 条 件 都 成 立 !"): 
} 


排除 法 有 效 避 免 了 条 件 嵌 套 的 复杂 性 , 当然 这 种 设计 也 存在 一 定 的 局 限 性 , 应 根据 需要 慎重 使 用 。 


| 4 全 注意 : 很 多 初学 者 在 使 用 让 语句 时 ， 容 易 犯 下 面 的 错误 . 
| ifla=1) { // 错误 的 比较 运算 
| alert(a): 


} 
| 把 比较 运算 符 (==) 错 写 为 赋值 运算 符 (=)。 对 于 这 样 的 Bug 一 般 很 难 发 现 ， 由 于 它 是 一 个 合 
| 法 的 表达 式 ， 不 会 触发 异常 ， 不 容易 排查 。 由 于 返回 值 为 非 0 数值 ， 则 JavaScript 会 自动 把 它 转 换 为 
| tmue， 因 此 对 于 这 样 的 选择 结构 ， 条 件 永远 成 立 ， 所 以 总 是 弹出 提示 信息 。 
| 为 了 防止 这 种 很 难 检查 的 错误 ,建议 在 条 件 表达 式 的 比较 运算 中 ,把 常量 写 在 左 侧 , 而 把 变量 写 
| 在 右 侧 ， 这 样 即使 把 比较 运算 符 (一 ) 错 写 为 赋值 运算 符 (=)， 也 会 导致 编译 错误 ， 因 为 常量 是 不 
| 能 够 被 赋值 的 。 从 而 能 够 即时 发 现 这 个 Bug。 


| ifl = a){ // 预防 赋值 运算 的 好 方法 

| alert(a): 

| } 

| 

| 下 面 错 误 也 经 常 发 生 。 

| var a=2: // 声明 变量 并 赋值 
这 1 一 3: // 误 在 条 件 表达 式 后 附加 分 号 
上 

| alert(a): // 但 是 依然 能 够 被 执行 的 复句 
} 

| 

| 当 在 条 件 表达 式 之 后 错误 地 附加 一 个 分 号 时 ， 整 个 条 件 结构 就 发 生 了 变化 。 如 果 用 代码 来 描述 ， 

| 则 上 面 结构 的 逻辑 应 该 如 下 所 示 。 

| Var a=2: / 声明 变量 并 赋值 


出 这 1 一 9) 
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/ 条 件 成 立时 将 执行 空 语句 
alert(a): // 独立 于 条 件 结构 的 复合 语句 


} | 
JavaSeript 解释 器 会 把 条 件 表达 式 之 后 的 分 号 视 为 一 个 空 语句 ， 从 而 改变 了 原来 设想 的 逻辑 。 由 | 
于 这 个 误 输 入 的 分 号 并 不 会 导致 编译 错误 ， 所 以 要 避免 这 个 低级 错误 ,应 牢记 条 件 表达 式 之 后 是 不 允 | 
许 使 用 分 号 的 ， 用 户 可 以 把 大 括号 与 条 件 表达 式 并 在 一 行书 写 来 预防 上 面 的 误 输入 。 


Var a=2; // 声明 变量 并 赋值 

这 1 一 9 { // 就 不 会 再 添加 分 号 表示 一 行 结束 
alert(a); 

} 


3.2.3 switch 语句 


让 多 重 选择 结构 执行 效率 比较 低 , 特别 是 当选 择 条 件 相同 时 ， 由 于 重复 调用 寺 语 句 来 计算 条 件 表 | 
达 式 会 浪费 时 间 ， 此 时 建议 使 用 switch 语句 设计 多 重 选择 结构 。 
switch 语句 的 语法 格式 如 下 。 


switch (expression) 
{ 


statements 


} 


switch 语句 的 statements 比较 特殊 ， 它 包含 一 个 或 多 个 case 从 名 ,或 者 包含 一 个 default 从 句 。 完 | 
整 结构 如 下 。 
switch (expression) { 
case label: 
statementList 
case label: 
statementList 


default: 
statementList 


) | 
当 执 行 switch 语句 时 ，JavaScript 解释 器 首先 计算 expression 表达 式 的 值 ， 然 后 使 用 这 个 值 与 每 

个 case 从 句 中 label 标签 表达 式 的 值 进行 比较 ， 如 果 相 同 则 执行 该 标签 下 的 语句 。 | 
在 执行 时 如 果 遇 到 跳 转 语句 , 则 会 跳出 switch 结构 。 否 则 按 顺序 向 下 执行 , 直到 switch 语句 末尾 。 

如 果 没 有 匹配 的 标签 ， 则 会 执行 default 从 句 下 的 语句 。 如 果 没 有 default 从 句 ， 则 跳出 switch 结构 。 
【示例 1】 下 面 示例 使 用 switch 语句 来 设计 多 分 支 选 择 结构 。 


switch (a = 3){ // 指定 多 重 条 件 表达 式 
case 1: / 从 旬 1 | 
alert(1): | 
break: / 停止 执行 ， 跳 出 switch 结构 | 
Case 2: / 从句 2 | 
alert(2): | 
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< 
| Ke 
二 的 
break: // 停止 执行 ， 跳 出 switch 结构 
| Case 3: 1/ 从 句 3 
| alert(3): 
人 | 上 
到 | ”示例 2] 从 ECMASeript3 版 本 开始 允许 case 从 句 后 面 abel 可 以 是 任意 的 表达 式 ， 
wa 
| case 3-2: / 表达 式 标签 
| alert(1); 
break: 
case 1+1: / 表达 式 标签 
| alert(2); 
| break:; 
| case b=3: 1/ 赋值 表达 式 
alert(3); 
} 


当 JavaScript 解释 switch 结构 时 ， 先 计算 switch 关键 字 后 面 的 条 件 表达 式 , 然后 计算 第 一 个 case 
从 名 中 的 标签 表达 式 的 值 ， 并 利用 全 等 (二 =) 运算 符 来 检测 二 者 的 值 是 否 相同 。 由 于 使 用 “= 一 ” 
| 运算 符 ， 因 此 不 会 自动 转换 每 个 标签 表达 式 返 回 值 的 类 型 。 
| 【示例 3】 针 对 示例 2 的 代码 ， 如 果 把 第 三 个 case 后 的 表达 式 的 值 设置 为 字符 串 ， 则 最 终 被 解析 
| 时 ， 不 会 弹出 提示 信息 。 
ae 
| Case 3 —2: // 表达 式 标签 


case 1+1: // 表达 式 标签 


case b="3": / 改变 标签 值 的 类 型 ， 则 无 法 进行 匹配 
alert(3): 
} 
case 从 句 可 以 省 略 子 句 ， 这 样 当 匹 配 到 该 标签 时 ， 会 继续 执行 下 面 case 从 句 包 含 的 子 句 。 
【示例 4】 下 面 示例 演示 了 case 中 如 果 没有 break 语句 ， 会 继续 执行 ， 直 到 switch 结束 。 


Switch (a= 1) { 
case 1: // 空 匹 配 


| 

| 

| 
< 负 注意 : 在 switch 语句 中 ，case 从 句 只 是 指明 了 执行 起 点 ， 但 是 没有 指明 终点 ， 如 果 没 有 在 case 
| 从 向 中 添加 break 语句 ， 则 会 发 生 连续 执行 的 情况 ， 从 而 忽略 后 面 case 从 名 ,这 样 就 会 破 
| 坏 switch 结构 多 选择 逻辑 . 
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深 提示 : 如 果 在 函数 中 使 用 switch 语句 ， 可 以 使 用 retum 语句 代替 break 语句 ， 终 止 switch 语句， 
防止 case 从 名 连续 执行 。 


3.2.4 _ default 从 句 


default 从 句 可 以 位 于 switch 结构 中 任意 的 位 置 ， 但 是 不 会 影响 多 重 条 件 的 正常 执行 。 
【示例 1】 把 3.2.3 节 示 例 按 如 下 顺序 调整 。 
switch (a=3) { 
default: 


// 默认 不 匹配 所 有 case 从 句 时 执行 该 从 句 下 的 句子 


alert(3): 
break; 
Case 1: 
alert(1); 
break:; 
Case 2: 
alert(2); 
break; 


} 

这 样 当 所 有 case 标签 表达 式 的 值 都 不 匹配 时 ， 会 跳 回 并 执行 default 从 句 中 的 子 句 。 但 是 ， 如 果 
default 从 句 中 的 子 句 没有 跳 转 语句 ， 则 会 按 顺 序 执行 后 面 case 从 句 的 子 句 。 

在 下 面 结构 中 ，switch 语句 会 先 检测 case 标签 表达 式 的 值 ， 由 于 case 从 句 中 标签 表达 式 值 都 不 
匹配 ， 则 跳 转 回来 执行 default 从 句 中 的 子 句 《弹出 提示 3)， 然 后 继续 执行 case 1 和 case 2 从 句 中 的 | 
子 句 (分 别 弹 出 提示 1 和 2)。 但 是 如 果 存 在 相 匹 配 的 case 从 句 ， 就 会 执行 该 从 句 中 的 子 句 ， 并 按 顺 
序 执行 下 面 的 子 句 ， 但 是 不 会 再 跳 转 返回 执行 default 从 句 中 的 子 句 。 

Switch (a= 3) { 

default: 


【示例 2】default 从 句 常用 于 处 理 所 有 可 能 性 之 外 的 情况 。 例 如 ， 处 理 异常 ， 或 者 处 理 默认 行 
为 、 默 认 值 。 但 是 ， 下 面 代码 就 存在 滥用 default 从 句 问题 。 
switch (opr) { 


case "add": // 正常 枚 举 
X=a+hb: 


break: 
case "sub": / 正常 枚 举 


case "mul": 1/ 正常 枚 举 
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default: / 异常 枚 举 
| x=alb; 
| break: 
| 


生 下 上 面 代码 设计 4 种 基本 算术 运算 , 但 是 它 仅 列 出 了 3 种 , 最 后 一 种 除法 使 用 default 从 句 来 设计 。 


显然 ， 使 用 下 面 结构 会 更 加 合理 。 


| Switch (opD { 
| case "add": / 正常 枚 举 
x=a+b; 


case "sub": // 正常 枚 举 
case "mul": / 正常 枚 举 


case "div": / 正常 枚 举 
X=a/b: 
break; 
} 
下 面 使 用 default 从 句 ， 来 处 理 可 能 存在 的 意外 情况 。 
switch (opr) { 
case "add": // 正常 枚 举 
X=a+b: 
break; 
case "sub": // 正常 枚 举 
x=a-b; 
break: 
case "mul": // 正常 枚 举 
X=a*b; 
| break: 
| case "div": // 正常 枚 举 
| X=a/b: 


break: 
| default: // 异常 处 理 
| alert(" 出 现 非 预期 的 opr 值 "); 
3.2.5 优化 选择 结构 


让 语句 和 switch 语句 都 可 以 用 来 设计 多 重 选择 结构 ，switch 结构 在 特定 环境 下 执行 效率 高 于 让 
| 结构 ， 简 单 比较 如 表 3.1 所 示 。 


表 3.1 站 结构 和 switch 结构 比较 


se 
| 结构 通过 嵌 套 结构 实现 多 重 选择 专 为 多 重 选择 设计 
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结构 Switch 结构 
可 以 测试 多 个 条 件 表达 式 仅 能 测试 一 个 条 件 表 达 式 
可 以 处 理 复杂 的 逻辑 关系 仅 能 够 处 理 多 个 枚 举 的 逻辑 关系 
可 以 适用 任何 数据 类 型 仅 能 够 应 用 整数 、 枚 举 、 字 符 串 等 类 型 数据 


通过 比较 ， 可 以 发 现 ， 如 果 能 使 用 switch 结构 ， 就 不 要 选择 站 结构 。 
无 论 是 使 用 站 结构 ， 还 是 使 用 switeh 结构 ， 应 确保 下 面 3 个 目标 的 基本 实现 。 
加 ”准确 表现 事物 的 逻辑 关系 ， 不 能 为 了 结构 而 破坏 事物 的 逻辑 关系 。 
加 ”优化 执行 效率 。 

简化 代码 层次 ， 使 代码 更 便于 阅读 。 

相对 而 言 ， 下 面 情况 更 适宜 选用 switch 结构 。 

枚 举 表达 式 的 值 。 这 种 枚 举 是 可 以 期 望 的、 平行 逻辑 关系 的 。 
表达 式 的 值 具有 离散 性 ， 不 具有 线性 的 非 连续 的 区 间 值 。 

表达 式 的 值 是 固定 的 ， 不 会 动态 变化 的 。 

表达 式 的 值 是 有 限 的 ， 而 不 是 无 限 的， 一 般 应 该 比较 少 。 
表达 式 的 值 一 般 为 整数 、 字 符 串 等 值 类 型 的 数据 。 

` 面 情况 更 适宜 选用 让 结构 。 

具有 复杂 的 迪 辑 关系 。 

表达 式 的 值 具 有 线性 特征 ， 如 对 连续 的 区 间 值 进行 判断 。 


才 罗 罗 罗 办 风 


测试 任意 类 型 的 数据 。 

【示例 1 设计 根据 学 生 分 数 进行 分 级 评定 : 如 果 分 数 小 于 60， 则 不 及 格 ; 如 果 分 数 在 60 与 75 
之 间 ， 则 评定 为 合格 ， 如 果 分 数 在 75 与 85 之 间 ， 则 评定 为 良好 ; 如 果 分 数 在 85 到 100 之 间 ， 则 评 
定 为 优秀 。 针 对 这 样 一 个 条 件 表达 式 ， 它 的 值 是 连续 的 线性 判断 ， 显 然 使 用 直 结 构 会 更 适合 一 些 。 


ifscore < 60) { // 线性 区 间 值 判断 
alert(" 不 及 格 "); 

} 

else if(60 <= score < 75) { / 线性 区 间 值 判断 
alert(" 合 格 "); 

’ 

else if(75 <= score < 85) { // 线性 区 间 值 判断 
alert(" 良 好 "): 

’ 

else if(85 <= score <= 100) { // 线性 区 间 值 判断 
alert(" 优 秀 "); 

} 


如 果 使 用 switch 结构 ， 则 需要 枚 举 100 种 可 能 ， 如 果 分 数值 还 包括 小 数 ， 则 这 种 情况 就 更 加 复杂 
了 ， 此 时 使 用 switch 结构 就 不 是 明智 之 举 。 
【示例 2】 设计 根据 性 别 进行 分 类 管理 。 这 个 案例 属于 有 限 枚 举 条件 ， 使 用 switch 结构 会 更 高 效 。 
switch (sex) { / 离散 值 判断 
i 


alert(" 女 士 "): 
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在 设计 中 ,如 果 把 最 可 能 的 条 件 放 在 前 面 ， 这 等 于 降低 了 程序 的 检测 次 数 ， 自 然 就 提升 选择 结构 
的 执行 效率 ， 这 在 大 批量 数据 检测 中 效果 非常 明显 。 

【示例 3】 在 网 站 登录 模块 ， 普 通 会 员 的 数量 要 远 远 大 于 版 主 和 管理 员 的 数量 。 大 部 分 登录 的 用 
户 都 是 普通 会 员 ， 如 果 把 普通 会 员 的 检测 放 在 选择 结构 的 前 面 ， 可 大 大 减少 检测 的 次 数 。 


【示例 4】 设 计 检 测 周一 到 周 五 值 日 任务 安排 的 选择 结构 。 可 能 周 五 的 任务 比较 重要 ， 或 者 周一 
的 任务 比较 轻 ， 但 是 对 于 这 类 有 着 明显 顺序 的 结构 ， 遵 循 自然 顺序 比较 好 。 如 果 打 乱 顺 序 ， 把 周 五 的 
任务 安排 在 前 面 ， 这 对 于 整个 选择 结构 的 执行 性 能 没有 太 大 帮助 ， 打 乱 的 顺序 不 方便 阅读 。 因 此 ， 按 
自然 顺序 来 安排 结构 会 更 富有 可 读 性 。 


Cy 
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选择 之 间 的 顺序 应 注意 优化 ， 当 然 对 于 同一 个 条 件 表达 式 内 部 也 应 该 考虑 逻辑 顺序 问题 。 | 
【示例 S】 有 两 个 条 件 a 和 b， 其 中 条 件 a 多 为 真 ， 而 b 是 一 个 必须 执行 的 表达 式 ， 那 么 下 面 设 | 
计 的 逻辑 顺序 就 欠 妥 当 。 | 


i R&D 


// 执行 任务 | 


如 果 条 件 a 为 false， 则 JavaScript 会 忽略 表达 式 b 的 计算 。 如 果 b 表达 式 影响 到 后 面 的 运算 ， 则 | 
不 执行 表达 式 b 自然 会 对 后 面 的 逻辑 产生 影响 。 因 此 ,可 以 采用 下 面 的 逻辑 结构 ,在 过 结 构 前 先 执行 | 
表达 式 b， 这 样 即使 条 件 a 的 返回 值 为 false， 也 能 够 保证 b 表达 式 被 计算 。 


3.3 循环 结构 


JavaScript 使 用 while 语句 、do-while 语句 、for 语句 和 for/in 语句 来 设计 循环 结构 。 
3.3.1 while 语句 
while 语句 的 基本 语法 如 下 。 


/或 
while (expression) 
statements 
在 while 循环 结构 中 ，JavaScript 会 先 计算 expression 表达 式 的 值 。 如 果 循 环 条 件 返回 值 为 false， 
则 会 跳出 循环 结构 ， 执 行 下 面 的 语句 ， 如果 循环 条 件 返 回 值 为 tue， 则 执行 循环 体内 的 语句 statement | 
或 循环 体内 的 复合 语句 statements。 | 
然后 ， 再 次 返回 计算 expression 表达 式 的 值 ， 并 根据 返回 的 布尔 值 决定 是 否 继续 执行 循环 体内 语 | 
句 。 周 而 复 始 ， 直 到 expression 表达 式 的 值 为 false 才 会 停止 执行 循环 体内 语句 。 | 
【示例 1】 如 果 设 置 expression 表达 式 的 值 为 tme， 则 会 形成 一 个 死 循环 。 


while (true): / 死 循 环 空转 | 
这 种 情况 很 容易 发 生 ， 它 相当 于 如 下 循环 结构 : | 
| 
while (true) / 死 循环 | 
/ 空转 
} 


在 程序 设计 中 ， 仅 希望 执行 一 定 次 数 的 重复 操作 或 连续 计算 。 所 以 ， 在 循环 体内 通过 一 个 循环 变 
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量 来 监测 循环 的 次 数 或 条 件 ， 循 环 变量 常 是 一 个 递增 变量 。 当 每 次 执行 循环 体内 语句 时 ， 会 自动 改变 
循环 变量 的 值 。 当 改变 循环 变量 的 值 时 ，expression 表达 式 也 会 不 断 发 生变 化 ， 最 终 导致 expression 
表达 式 为 false， 从 而 停止 循环 操作 。 


全 | 【示例 2】 在 循环 体 设计 递增 变量 ， 用 来 控制 循环 次 数 。 
| varn=0: / 声明 并 初始 化 循环 变量 
re /和 人 
| { // 可 以 执行 的 复合 语句 
| ntt; / 递增 循环 变量 
alert(n); / 执行 循环 操作 


上 
也 可 以 在 循环 的 条 件 表达 式 中 自动 递增 或 递减 值 。 针 对 上 面 的 示例 可 以 进行 如 下 设计 。 


varn=0; 


while (n++ < 10) / 在 循环 条 件 中 递 加 循环 变量 的 值 
{ 


| alert(n): 
| } 
| An 注意 : 递增 运算 符 的 位 置 对 循环 的 影响 ， 如 果 在 前 则 将 减少 一 次 循环 操作 。 


| 【示例 3】 下 面 的 示例 将 循环 执行 9 次 ， 而 上 面 的 示例 都 将 循环 执行 10 次 ， 这 是 因为 Htn < 10 
| 表达 式 是 先 递增 变量 的 值 之 后 再 进行 比较 ， 而 n++ < 10 表达 式 是 先 比较 之 后 再 递增 变量 的 值 。 
| 


varn=0; 


while (++n < 10) / 仅 循环 执行 9 次 


3.3.2 do-while 语句 


do-while 语句 是 while 循环 结构 的 特殊 形式 ， 其 语法 格式 如 下 。 
| 
rt 


statement 
while (expression): 
| / 或 
| 
| statements 
while (expression): 
在 do-while 循环 结构 中 ，JavaScript 会 先 执行 循环 体内 语句 statement 或 循环 体内 的 复合 语句 
| statements， 然 后 计算 expression 表达 式 的 值 。 如 果 循环 条 件 返回 值 为 false， 则 会 跳出 循环 结构 ， 执 行 
| 下 面 的 语句 ; 如 果 循 环 条件 返 回 值 为 tue, 则 再 次 返回 执行 循环 体内 的 语句 statement 或 循环 体内 的 复 
| 合 语句 statements。 
| 然后 ， 再 次 计算 expression 表达 式 的 值 ， 并 根据 返回 的 布尔 值 决定 是 否 继续 执行 循环 体内 语句 。 
| 周而复始 ， 直 到 expression 表达 式 的 值 为 false 才 会 停止 执行 循环 体内 语句 。 
| 【示例 】 针 对 3.3.1 节 的 示例 使 用 do-while 结构 来 设计 ， 则 代码 如 下 所 示 。 
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varn=0: // 声明 并 初始 化 循环 变量 | 

do // 执行 循环 体 命令 

{ // 可 以 执行 的 复合 语句 
nt / 递增 循环 变量 | 
alert(n): / 执行 循环 操作 

} 

while (n < 10); // 循环 条 件 

【拓展 】 


简单 比较 while 结构 和 do-while 结构 ， 则 它们 之 间 的 区 别 如 表 3.2 所 示 。 | 
| 

表 3.2 while 结构 和 do-while 结构 比较 | 

| 


do-while 结构 


先 执行 循环 操作 , 再 检测 条 件 。 因 此 不 管 循环 条 件 如 何 ， 

逻辑 结构 ”| 先 检测 条 件 ， 再 执行 循环 操作 都 将 执行 一 次 循环 操作 
包含 do 和 while 关键 字 ， 并 以 do 关键 字 开 头 ， 而 while 

关键 字 仅 包含 while 关键 字 ， 并 以 此 开头 关键 字 位 于 结构 的 末尾 


- do-while 结构 的 未 尾 必 须 使 用 分 号 来 表示 结束 ， 这 是 因 
语法 特征 “| 在 while 关键 字 后 的 循环 表达 式 之 后 | 为 该 结构 的 未 尾 是 一 个 条 件 表达 式 ， 而 不 是 大 括号 标识 
不 用 分 号 和 


3:3:3: Ff 语句 
与 while 相 比 ，for 是 优化 的 循环 结构 。for 语句 的 语法 格式 如 下 。 


for (initialization: test; increment ) 
statements 


| 视频 讲解 
| 
| 


for 循环 结构 把 初始 化 变量 、 检 测 循环 条 件 和 递增 变量 都 集中 在 for 关键 字 后 的 小 括号 内 , 把 它们 
作为 循环 结构 的 一 部 分 固定 下 来 ， 这 样 就 可 以 防止 在 循环 结构 中 忘记 变量 初始 化 ,或 者 疏忽 递增 循环 
变量 ， 同 时 也 简化 了 操作 。 

在 for 循 环 结构 开始 执行 之 前 , 先 计 算 第 一 个 表达 式 initialization, 在 这 个 表达 式 中 可 以 声明 变量 ， 
为 变量 赋值 ， 或 者 通过 逗号 运算 符 执 行 其 他 操作 。 然 后 再 执行 第 二 个 表达 式 test， 如 果 该 表达 式 的 返 | 
可 值 为 tue， 则 执行 循环 体内 的 语句 。 最 后 返回 计算 increment 表达 式 ， 这 是 一 个 具有 副作用 的 表达 | 
式 ， 与 initialization 表达 式 一 样 都 可 以 赋值 或 改变 变量 的 值 ， 通 常 在 该 表达 式 中 利用 递增 (++) 或 递 
减 (一 ) 运算 符 来 改变 循环 变量 的 值 。 

【示例 1】 针 对 3.3.2 节 示例 ， 可 以 使 用 for 循环 结构 来 设计 。 


for(varn=1:n<1l:nt+) 


alert(n): 


在 for 循环 结构 中 ， 最 后 才 计 算 递 加 表达 式 ， 所 以 应 该 调整 检测 条 件 中 的 比较 值 ， 即 n< 11。 否 | 
则 循环 结构 中 执行 次 数 为 9 次 ， 而 不 是 10 次 。 

由 于 for 结构 中 的 3 个 表达 式 没有 强制 性 限制 ， 用 户 可 以 用 逗号 运算 符 来 运算 其 他 子 表达 式 。 例 
如 ， 执 行 其 他 变量 声明 或 赋值 ， 计 算 相 关 条 件 检测 或 者 附带 变量 递 加 等 操作 。 
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【示例 2】 在 下 面 for 结构 中 : 第 一 个 表达 式 中 声明 并 初始 化 3 个 变量 ; 在 第 二 个 表达 式 中 为 变 
量 m 和 1 执行 递 加 运算 ， 而 检测 变量 n 的 值 是 否 小 于 11; 在 第 三 个 表达 式 中 同时 为 3 个 变量 执行 递 
。 | 加 运算 。 
仿 rarn=lm=ll=l mt,Ht,n<ll: mt.Hr att) 


| qd 
we 
HH 


在 for 语句 中 附加 了 其 他 表达 式 运算 ， 不 会 破坏 for 循环 结构 。for 语句 是 根据 test 表达 式 的 最 终 
返回 值 来 决定 是 否 执行 循环 操作 ， 所 以 在 设置 条 件 时 要 把 限定 条 件 放 在 最 后 。 
【示例 3】 下 面 的 test 表达 式 的 逻辑 顺序 将 会 导致 for 循环 结构 成 为 死 循环 ， 因 为 “m ++ ,n < 11， 
1++” 表 达 式 的 最 后 返回 值 始终 是 true。 


for(varn=1,m=1,1=1;mt+,n<1l,H+t; mhr,lHr ,ntr) 


alert(n): 
} 


容 提示 : 对 于 while 结构 来 说 ， 经 常 需要 在 循环 结构 的 前 面 声 明 并 初始 化 循环 变量 ， 然 后 在 循环 体 
内 附加 递增 循环 变量 。 使 用 while 结构 模拟 for 结构 的 格式 如 下 。 


initialization: // 声明 并 初始 化 循环 变量 
| while (test) / 循环 条 件 
| 
| ee 
| statement // 可 执行 的 循环 语句 
increment: // 递增 循环 变量 
} 


| 3.3.4 for-in 语句 


for-in 语句 是 for 语句 的 一 种 特殊 形式 ， 其 语法 格式 如 下 。 
| for ([var] variable in <object | array>) 
| statement 
| variable 表示 一 个 变量 ， 可 以 在 其 前 面 附加 var 语句 ， 用 来 直接 声明 变量 名 。in 关键 字 后 面 是 一 
| 个 对 象 或 数组 类 型 的 表达 式 。 
在 运行 该 循环 结构 时 ,会 声明 一 个 变量 ,然后 计算 对 象 或 数组 类 型 的 表达 式 ， 并 遍历 该 对 象 或 表 
达 式 。 在 遍历 过 程 中 ， 每 获取 一 个 对 象 或 数组 元 素 ， 就 会 临时 把 对 象 或 数组 中 元 素 存 储 在 variable 指 
定 的 变量 中 。 注 意 ， 对 于 数组 来 说 ， 该 变量 存储 的 是 数组 元 素 的 下 标 ; 而 对 于 对 象 来 说 ， 该 变量 存储 
| 的 是 对 象 的 属性 名 或 方法 名 。 
然后 ， 执 行 statement 包含 的 语句 。 执 行 完毕 ， 返 回 继续 枚 举 下 一 个 元 素 ， 以 此 周而复始 ， 直 到 
对 象 或 数组 中 所 有 元 素 都 被 枚 举 为 止 。 
在 循环 体内 还 可 以 通过 中 括号 〈[]) 和 临时 变量 variable 来 读 取 每 个 对 象 属性 或 数组 元 素 的 值 。 
【示例 1】 下 面 示例 演示 了 如 何 利 用 forin 语句 遍历 数组 ， 并 读 取 枚 举 中 临时 变量 和 元 素 的 值 的 
方法 。 
| var a=[1. true, "abe", 34. false]: / 声明 并 初始 化 数组 变量 
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for (varb in a) // 遍历 数组 

站 
alert(b): / 显示 枚 举 中 临时 变量 值 
alert(a[b]); / 显示 每 个 元 素 的 值 

} 


使 用 while 或 for 语句 通过 数组 下 标 和 length 属性 可 以 实现 相同 的 枚 举 操作 , 不 过 for-in 语句 提供 ， 
了 一 种 更 直观 、 高 效 的 枚 举 对 象 属性 或 数组 元 素 的 方法 。 
【示例 2】 针 对 示例 1， 可 以 使 用 如 下 两 种 结构 实现 相同 的 设计 目的 。 
回 ”使 用 for 结 构 转 换 。 
vara=[l,tme, "abc", 34. false]: 
for(varb=0:b<alength: b++ ) 
{ 


alert(b): 
alert(a[b]): 
} 


使 用 while 结构 转换 。 


vara= [1, true, "abc", 34. false]: 
varb=0; 
while (b < a.length) 
{ 
alert(b): 
alert(a[b]): 
b++; 


forin 语句 比较 灵活 ， 在 遍历 对 象 或 数组 时 经 常用 到 ， 也 有 很 多 技巧 需要 用 户 掌握 。 理 解 for-in 
结构 特性 将 有 助 于 在 操作 引用 型 数据 时 找到 一 种 解决 问题 的 新 途径 。 

在 forin 语法 中 ， 变 量 variable 可 以 是 任意 类 型 的 变量 表达 式 ， 只 要 该 表达 式 的 值 能 够 接收 赋值 | 
即 可 。 

【示例 3】 在 下 面 示例 中 ， 定 义 一 个 对 象 o， 该 对 象 中 包含 3 个 属性 ， 同 时 定义 一 个 空 数组 、 一 
个 临时 变量 n。 然 后 定义 一 个 空 数组 ， 利 用 枚 举 法 把 对 象 的 所 有 属性 名 复制 到 数组 中 。 


re // 定义 包含 3 个 属性 的 对 象 | 
x: 1, | 
ye | 
en | 
i | 
vara=[]: / 定义 空 数组 | 
varn=0: // 定义 临时 循环 变量 ， 并 赋值 为 0 | 
党 // 遍历 对 象 o， 然 后 把 所 有 属性 都 赋值 到 数组 中 | 
| 
其 中 “for (aln ++] in oj:” 语 句 实际 上 是 一 个 空 的 循环 结构 ， 展 开 其 结构 则 如 下 所 示 。 | 
for (alnt+] ino) // 遍历 对 象 0 | 
{ 
// 空 语句 | 
| 
| 
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【示例 4】 针 对 上 面 的 示例 ， 可 以 使 用 如 下 结构 遍历 数组 ， 并 读 取 存 储 的 值 。 


pe) /1 谢 历 数组 a， 在 该 结构 中 直接 声明 并 初始 化 临时 变量 i 
me 
| alert(); // 读 取 临时 变量 i 的 什 

ee // 读 取 数 组 元 素 的 什 


. 


| for-in 能 够 枚 举 对 象 的 所 有 成 员 ， 但 是 如 果 对 象 的 成 员 被 设置 为 只 读 、 存 档 或 不 可 枚 举 等 属性 ， 
| 那么 使 用 forin 语句 时 是 无 法 枚 举 的 。 因 此 ， 当 使 用 这 种 方法 遍历 内 置 对 象 时 ， 可 能 就 无 法 读 取 全 部 
| 属性 。 
| 【示例 5】 在 下 面 示例 中 ，for-in 无 法 读 取 内 置 对 象 Object 所 有 属性 。 
| forGari=0inObjecb 
| 上 

alert(); 

alert(a[i]); 
} 
但 是 可 以 读 取 客户 端 Document 对 象 的 所 有 可 读 属性 。 


for (var i= 0 in document) 
{ 


| document.write("document." +i+ "=" + document[i]): 
| document write("<br />"); 
| 


疱 提示 : 所 有 内 置 方法 都 不 多 许 枚 举 ， 对 于 用 户 自 定义 属性 ， 可 以 枚 举 。 
【示例 6】 为 Object 内 置 对 象 自 定义 两 个 属性 ， 则 在 for-in 结构 中 可 以 枚 举 它们 。 


Objecta= 1; / 为 内 部 Object 对 象 定义 属性 a 
‘Objectb =tme: 1/ 为 内 部 Object 对 象 定义 属性 b 
for(vari=0inObjec) // 遍历 Object 对 象 
| { 
| alert(): 
| alert(Object[i]): 


| 由 于 对 象 成 员 没有 固定 的 顺序 ， 所 以 在 使 用 for-in 循环 时 也 无 法 判断 遍历 的 顺序 ， 因 此 在 遍历 结 

| 果 中 会 看 到 不 同 的 排列 顺序 。 

| 

4 注意 : 如 果 在 循环 过 程 中 删除 菜 个 没有 被 枚 举 的 属性 ， 则 该 属性 将 不 会 被 枚 举 . 反 过 来 如 果 在 特 

| 环 体 中 定义 了 新 属性 ， 那 么 循环 是 否 被 枚 举 则 由 引擎 来 决定 。 因此， 在 for-in 循环 体内 改 
变 枚 举 对 象 的 属性 有 可 能 会 导致 意外 发 生 ， 一 般 不 建议 随意 在 循环 体内 操作 属性 。 


| 
【示例 7】for-in 结构 能 够 枚 举 对 象 内 所 有 可 枚 举 的 属性 ， 包 括 原生 属性 和 继承 属性 ， 这 也 带 来 
| 


一 个 问题 如 果 仅 希望 修改 数组 原生 元 素 ， 而 该 数组 还 存在 继承 值 或 额外 属性 值 ， 那 么 将 给 操作 带 来 


麻烦。 
Arayprototype x = xm // 自 定义 数组 对 象 的 继承 属性 


| vara=[1.2.3]; / 定义 数组 对 象 ， 并 赋值 


。78 。 


第 3 章 ， .JavaScript 程序 结构 设计 $9 | 


ES // 定义 数组 对 象 的 额外 属性 | 
for (variin a) // 遍历 数组 对 象 a | 
| 

alert(i + ":" + afi]); | 
} 


在 上 面 示例 中 ， 使 用 for-in 结构 将 获取 5 个 元 素 ， 其 中 包括 3 个 原生 元 素 ， 一 个 是 继承 的 属性 x ， 
和 一 个 额外 的 属性 y。 

如 果 仅 想 获取 数组 a 的 原生 元 素 , 那么 上 述 操作 将 会 枚 举 出 很 多 意外 的 值 ， 这 些 值 并 非 是 用 户 想 
要 的 。 为 避免 此 类 问题 ， 建 议 使 用 for 循环 结构 。 

for (vari= 0; i< a.length ;i++) 


{ 


alert(i + ":" + a[i]): 
} 


上 面 的 for 结构 仅 会 遍历 数组 对 象 a 的 原生 元 素 ， 而 将 忽略 它 的 继承 属性 和 额外 属性 。 
3.3.5 ”优化 循环 结构 
简单 比较 while 结构 和 for 结构 ， 它 们 之 间 的 区 别 如 表 3.3 所 示 。 


表 3.3 while 结构 和 for 结构 比较 
while 结构 for 结构 


根据 条 件 表达 式 的 值 决定 循环 操作 根据 操作 次 数 决定 循环 操作 
比较 复杂 ， 结 构 相对 宽松 比较 简洁 ， 要 求 比较 严格 
存在 一 定 的 安全 隐患 执行 效率 比较 高 
| dowhile 话 名 | forin 语句 
循环 结构 最 浪费 资源 ， 一 点 小 小 的 损耗 都 将 会 被 成 倍 放 大 ， 从 而 影响 程序 运行 的 效率 。 
1 优化 结构 


循环 结构 常常 与 选择 结构 混用 在 一 起 。 但 是 如 何 谋 套 就 非常 讲究 。 
【示例 1】 设 计 一 个 循环 结构 ， 结 构 内 的 循环 语句 只 有 在 特定 条 件 下 才 被 执行 。 如 果 使 用 一 个 简 
单 的 例子 来 演示 ， 则 正常 思维 结构 如 下 所 示 。 


Var a = true: 
for (varb=1:b<10;b+t+) // 循环 结构 
这 a 一 tme) / 条 件 判断 | 
{ | 
alert(b): | 
} | 
; 


很 明显 ， 在 这 个 循环 结构 中 站 语句 会 被 反复 执行 。 如 果 这 个 站 语句 是 一 个 固定 的 条 件 检测 表达 | 
式 ， 即 如 果 让 语句 的 条 件 不 会 受 循环 结构 的 影响 ， 则 不 妨 采 用 如 下 的 结构 来 设计 。 

if(a — true) / 条 件 判断 

{ 
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for (var b=1:b<10:b++) // 循环 结构 
| { 
| alert(b); 
g | 
全 A 
这 样 寺 语句 只 被 执行 一 次 ， 如 果 计 条 件 不 成 立 ， 则 直接 省 略 for 语句 的 执行 ， 从 而 使 程序 的 执行 
效率 大 大 提高 ;但 是 如 果 计 条 件 表达 式 受 循环 结构 的 制约 ， 则 不 能 够 采用 这 种 结构 嵌 套 。 


| 
| 2， 避免 不 必要 的 重复 操作 

在 循环 体内 经 常会 存在 不 必要 的 重复 计算 问题 。 

【示例 2】 在 下 面 示例 中 ， 通 过 在 循环 内 声明 数组 ， 然 后 读 取 数 组 元 素 的 值 。 


for (var b=0;b<10:;b++) / 循环 
var a = new Array(1.2.3.4.5.6.7.8.9.10): // 声明 并 初始 化 数组 
alert(a[b]): 

L 


| 显然 ， 在 这 个 循环 结构 中 ， 每 循环 一 次 都 会 重新 定义 数组 ， 这 种 设计 极 大 地 浪费 了 资源 。 如 果 把 
| 这 个 数组 放 在 循环 体外 会 更 加 高 效 。 

| vaa=newAnay(2345678910) // 声明 并 初始 化 数组 

| for (var b=0:; b<10:; b++) 
| 


alert(a[b]): / 循环 


3 妥善 定义 循环 变量 

| 对 于 for 结构 来 说 ， 主 要 利用 循环 变量 来 控制 整个 结构 的 运行 。 当 循环 变量 仅 用 于 结构 内 部 时 ， 
| 不妨 在 for 语句 中 定义 ， 这 样 能 够 优化 循环 结构 。 

【示例 3】 计 算 100 之 内 数字 的 和 。 


vars=0: // 声明 变量 
for (vari= 0:i<= 100: i++) // 循环 语句 
s+=E 
| } 
| alert(s): 
显然 下 面 做 法 就 不 妥当 ， 因 为 单独 定义 循环 变量 ， 实 际 上 增 大 了 系统 开销 。 
a 久 声明 变量 
| vars=0: / 声明 变量 
| for (i=0:i<=100:i++) // 循环 语句 
| { 
1 
| } 
| alert(s); 
| 
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本 | 


3.4 跳 转 结构 


跳 转 语句 主要 包括 标签 、break、continue、return， 以 便 在 选择 结构 、 循 环 结构 中 改变 流程 。 
3.4.1 标签 语句 


在 JavaScript 中 ， 任 何 语句 都 可 以 添加 一 个 标签 ， 语 法 格式 如 下 。 
label: statements 


| 视频 讲解 
label 为 任意 合法 的 标识 符 ， 但 不 能 使 用 保留 字 。 由 于 标签 名 与 变量 名 属于 不 同 的 语法 体系 , 所 | 
以 不 用 担心 标签 名 与 变量 名 重 受 。 然 后 使 用 冒号 分 隔 标 签名 与 标签 语句 。 
【示例 】 在 下 面 代码 中 ，b 就 是 标签 名 ， 而 a 就 是 对 象 的 属性 名 ， 其 中 标签 b 就 是 对 对 象 结构 进 
行 标记 。 


b:{ 
a: true | 
) 
由 于 标签 名 和 属性 名 都 属于 标签 范畴 ， 不 能 重 名 ， 下 面 这 种 写法 是 错误 的 。 | 
| 
本 / 标签 语句 的 标记 名 | 
a: true / 对 象 属性 的 标记 名 | 
) 
对 象 属性 的 标识 名 可 以 访问 属性 。 | 
varo={ | 
a: true | 
| 
alert(o.3): / 通过 对 象 成 员 标识 符 可 以 用 对 象 成 员 | 
但 是 不 能 使 用 标签 语句 的 标记 名 来 引用 被 标记 的 语句 ， 下 面 这 种 写法 是 错误 的 。 | 
b:{ | 
a: true | 
} 
alert(b.a); // 不 能 够 使 用 标签 语句 的 标记 名 来 引用 被 标记 的 语句 


3.4.2 ”break 语句 
break 语句 能 够 终止 循环 或 多 重 选择 结构 的 执行 ， 只 能 用 在 循环 结构 和 switch 多 重 选 择 结构 中 ， 
用 法 如 下 。 
break: 
【示例 1】break 语句 可 以 在 循环 结构 中 使 用 ， 用 来 退出 循环 结构 。 


for (vari=0: :i++) 


ii >= 10) break: // 通过 break 语句 来 监测 for 循环 操作 
alert(i): 


| 
| 
| 
| 
人 
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break 关键 字 后 面 可 以 跟随 一 个 标签 名 ， 用 来 指示 程序 终止 执行 之 后 要 跳 转 的 位 置 ， 并 以 该 标签 
语句 末尾 的 位 置 为 起 点 继续 执行 。 


【示例 2】 在 下 面 示例 中 ， 设 计 了 一 个 3 层 赔 套 的 循环 结构 。 分 别 为 每 层 循环 定义 一 个 标签 ， 然 
后 在 内 部 通过 条 件 结构 来 判断 循环 变量 值 的 变化 ， 并 利用 带 有 标签 名 的 break 语句 进行 跳 转 。 


break 语句 和 标签 语句 结合 使 用 仅 限 于 嵌 套 结构 内 。 

【示例 3】 在 下 面 示例 中 ， 设 计 3 个 并 列 的 循环 结构 ， 企 图 在 它们 之 间 通 过 break 语句 和 标签 语 

句 来 实现 相互 跳 转 ， 这 是 不 允许 的 。 此 时 会 提示 编译 错误 ， 找 不 到 指定 的 标签 名 。 因 为 JavaScript 在 
运行 break 语句 时 ， 仅 限于 当前 结构 或 当前 嵌 套 结构 中 寻找 标签 名 。 
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break a; | 
; | 
} | 
使 用 带 有 标签 的 break 语句 时 应 注意 以 下 两 点 。 | f 
只 有 使 用 嵌 套 的 循环 或 者 谋 套 的 switch 结构 , 且 需 要 退出 非 当 前 层 结构 时 , 才 可 以 使 用 带 有 | 贷 


标签 的 break 语句 。 
break 关键 字 与 标签 名 之 间 不 能 够 包含 换行 符 , 否则 JavaScript 会 把 它们 看 作 是 两 个 句子 , 并 bte 
分 别 单独 执行 。 
break 语句 主要 功能 是 提前 结束 循环 或 多 重 选择 判断 。 这 在 循环 条 件 复杂 ， 且 无 法 预 控制 的 情况 
下 ， 可 以 避免 死 循 环 或 者 不 必要 的 空 循环 。 
【示例 4】 在 下 面 示例 中 ， 设 计 在 客户 端 查 找 document 对 象 的 bgColor 属性 。 如 果 完 全 遍历 
document 对 象 ， 会 浪费 很 多 时 间 。 在 for-in 结构 中 添加 一 个 计 结构 判断 所 枚 举 的 属性 名 是 否 等 于 | 
"bgColor"， 如 果 相等 ， 则 使 用 break 语句 跳出 循环 结构 。 | 


for (iin documenb { | 
iitoString0 一 "bgColor { | 
document.write("document." + i+ "=" + document[i] + "<br />"): | 

break; 


} 
} 


在 上 面 代码 中 ，break 语句 并 非 跳 出 当前 的 站 结构 体 ， 而 是 跳出 当前 最 内 层 的 循环 结构 。 
【示例 5】 在 下 面 嵌 套 结构 中 ，break 语句 不 是 退出 for-in 循环 体 ， 而 是 退出 switch 结构 体 。 
for (iin document) { 
switch (itoStringO) { 
case "bgColor": 
document.write("document." +i+ "=" + document[i] + "<br />"); 
break 


default: 
document write(" 没 有 找到 "): 
} 
} 


【示例 6 针对 上 面 示例 ,如 果 需 要 退出 外 层 的 循环 结构 ,就 需要 为 for 语句 定义 一 个 标签 outloop， 
然后 在 break 语句 中 指定 该 标签 名 , 以 便 从 最 内 层 的 多 重 选择 结构 中 跳出 最 外 层 的 forin 循环 结构 体 。 


outloop: for (iin document) { 
switch (itoStringO) { 
case "bgColor": 
document.write("document." +i+ "=" + document[i] + "<br />"): 
break outloop: 
default: 
document.write(" 没 有 找到 "); 


} 


3.4.3 ”continue 语句 
continue 与 break 一 样 都 独立 成 句 , 但 是 break 语句 用 于 停止 循环 而 continue 语句 用 于 停止 当前 | 视频 讲解 
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| 循环 ， 继 续 执行 下 一 次 循环 。 
与 break 语句 语法 相同 ，continue 语句 可 以 跟随 一 个 标签 名 ， 用 来 指定 继续 执行 的 循环 结构 的 起 


【示例 1】 在 下 面 示例 中 ， 当 循环 变量 等 于 4 时 ， 会 停止 循环 体内 最 后 一 句 的 执行 ， 返 回 for 语 
| 句 继续 执行 下 一 次 选 代 。 
| 

for (var i=0; i<10:i++) 

{ 


alert(); 
if(i — 4) continue: // 继续 执行 下 一 次 迭代 
alert(); 


| continue 语句 只 能 在 循环 结构 (如 while、do-while、for、forin) 内 使 用 ， 在 其 他 地 方 都 会 引发 编 
| 译 错误 。 当 执行 continue 语句 时 ,会 停止 当前 迭代 过 程 ， 开 始 执 行 下 一 次 的 迭代 。 但 是 对 于 不 同 的 结 
| 构 体 ， 其 继续 执行 的 位 置 也 略 有 不 同 。 

对 于 for 循环 结构 来 说 , 将 会 返回 执行 for 语句 后 第 三 个 表达 式 , 然后 再 执行 第 二 个 表达 式 ， 


如 果 条 件 满足 ， 则 继续 执行 下 一 次 迭代 ， 如 图 3.1 所 示 。 
| 
| 9 
| 


一- 一 一 

for (initialization ; test:i tt ) 
{ © > 

| Wg 


continue: {3) 
statement 


} 


| 3.1 “continue 语句 在 for 结构 中 的 执行 路 线 图 

| 对 于 for-in 循环 结构 来 说 ， 将 会 以 下 一 个 赋 给 循环 变量 的 属性 名 开始 再 次 新 的 迭代 。 
| 对 于 while 循环 结构 来 说 ， 将 会 返回 再 次 检测 while 语句 后 的 表达 式 ， 如 果 为 tue， 则 重新 
开头 执行 循环 体内 所 有 语句 ， 如 图 3.2 所 示 。 


Oy initialization ; 


| 

| 

| he ten? re) 
| , 


| statement 
continue; "@ 


statement 


increment: 


| 图 3.2 continue 语句 在 while 结构 中 的 执行 路 线 图 


【示例 2】 下 面 这 个 循环 结构 被 执行 时 ， 将 成 为 死 循 环 。 
Var i=0; 
while (<10) { 
alert(?); 
ifli =—= 4) continue: 
二 


} 


回 ”对 于 do-while 循环 结构 来 说 ,会 跳 转 到 底部 的 while 语 句 先 检测 条 件 表达 式 ,如 果 条 件 为 true， 
则 将 从 do 语句 后 开始 下 一 次 的 迭代 ， 如 图 3.3 所 示 。 


statement 
continue; 
statement 
increment; 


While (tesb: 


四 3.3 ”continue 语句 在 do-while 结构 中 的 执行 路 线 图 
do-while 结构 与 while 结构 比较 相似 ， 其 中 continue 语句 下 面 的 语句 将 被 忽略 。 但 是 在 JavaScript 
1.2 版 本 中 存在 一 个 Bug， 它 将 不 检测 底部 while 语句 后 的 循环 条 件 ， 而 是 直接 跳 转 到 顶部 do 语句 后 
面 开始 下 一 次 迭代 。 所 以 ， 在 使 用 do-while 结构 时 应 该 注意 这 个 安全 风险 。 
【示例 3】 在 下面 示例 中 ， 利 用 continue 语句 辅助 过 滤 掉 数组 a 中 的 字符 串 元 素 。 


| / 定义 并 初始 化 数组 a | 

varb=[],j=0; / 定义 数组 b 和 变量 j | 

for (variin a) { // 遍历 数组 a | 
这 typeofafi] 一 | 

如 果 站 家 折 所 类 型 和 和 窜 和， 则 返回 继续 下 一 次 迭代 | 

continue:; | 

blj++] = afi]: / 把 非 字 符 串 类 型 的 元 素 值 赋值 给 数组 b 

} 

alert(b): // 返回 1.2.3.4 


3.5 异常 处 理 结构 


异常 处 理 机 制 就 是 一 套 应 对 JavaScript 代码 发 生 错 误 时 的 处 理 方法 , 这 套 方法 通过 try/catch/finally 
结构 语句 来 实现 ， 把 代码 放 在 这 个 结构 中 执行 就 可 以 避免 异常 发 生 。 
浴 提示 : JavaScript 内 置 了 Error 对象， 同时 还 派生 了 6 个 子 对 象 ， 使 用 它们 可 以 跟 
踪 异常 。 详 细 说 明 请 扫 码 阅读 。 
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| 3.5.1 throw 语句 

| throw 语句 能 够 主动 抛 出 一 个 异常 告诉 系统 发 生 了 异常 状况 或 错误 。throw 语句 的 语法 格式 
| 如 下 : 

| throw expression: 

| expression 可 以 是 任意 类 型 的 表达 式 ， 一 般 常 用 它 来 声明 Error 对 象 或 者 Error 子 类 的 一 个 实例 。 
【示例 】 在 下 面 循环 结构 中 ， 定 义 了 一 个 异常 并 使 用 throw 语句 把 它 抛 出 来 ， 这 样 当 循 环 变量 大 
| 于 5 时， 系统 会 自动 弹出 一 个 编译 错误 ， 提 示 “ 循 环 变 量 的 值 大 于 5 了 ”的 错误 信息 。 


| for(var i= 0:i<10:iHH{ 
| 这 i>5) 
| throw new Error(" 循 环 变量 的 值 大 于 5 了 "); / 定义 并 抛 出 一 个 异常 

} 

在 抛 出 异常 时 , JavaScript 解释 器 会 停止 程序 的 正常 执行 , 并 跳 转 到 与 其 最 近 的 异常 处 理 器 (catch 
结构 ) 中。 如 果 解 释 器 没有 找到 异常 处 理 器 ， 则 会 检查 上 一 级 的 catch 结构 ， 并 以 此 类 推 ， 直 到 找到 
一 个 异常 处 理 器 为 止 。 如 果 在 程序 中 没有 找到 任何 异常 处 理 器 ， 将 会 视 其 为 错误 并 显示 出 来 。 


| 3.5.2 try-catch-finally 语句 


不 管 是 系统 抛 出 ， 还 是 用 户 有 意 抛 出 异常 ， 都 需要 捕获 (catch) 异常 ， 以 便 采 取 适 当 的 动作 把 程 
| 序 从 异常 状态 恢复 到 正常 运行 状态 。 

| try-catch-finally 语句 是 JavaScript 异常 处 理 器 ， 其 中 try 从 句 负责 指明 需要 处 理 的 代码 块 。catch 
| 从 句 负责 捕获 异常 ， 并 决定 应 对 之 策 。finally 从 句 负责 后 期 处 理工 作 ， 如 清除 代码 、 释 放 资 源 等 。 不 
管 异 常 是 否 发 生 ，finally 从 句 最 后 都 是 要 执行 的 。 整 个 异常 处 理 的 结构 和 从 句 之 间 的 相互 关系 如 下 。 


ty 


// 调试 代码 块 


| 国 枉 
| catchG) 
| 


/ 捕获 异常 并 进行 处 理 


/ 后 期 事务 处 理 


| 在 正常 情况 下 ， 程 序 按 顺 序 执行 ty 从 句 中 的 代码 。 如 果 没 有 异常 发 生 ， 将 会 忽略 catch 从 句 ， 
| 跳 转 到 finally 从 句 中 继续 执行 ;如 果 在 try 从 句 中 运行 时 发 生 错 误 或 者 使 用 throw 语 句 主动 抛 出 异常， 
| 则 执行 catch 从 句 代码 块 ， 在 该 从 句 中 通过 参数 变量 引用 抛 出 的 Error 对 象 或 者 其 他 值 ， 同 时 定义 处 
| 理 异常 的 方法 ， 或 者 忽略 不 计 ， 或 者 再 次 抛 出 异常 等 。 


”4 鲁 注 意 : 在 弄 常 处 理 结构 中 ， 大 括号 不 是 复合 语 身 的 一 部 分 ,而 是 异常 处 理 结构 的 一 部 分 ， 任 何 时 
| 修 都 不 能 够 省 咯 这 些 大 括号 。 
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【示例 1】 在 下 面 的 代码 中 ， 先 在 try 从 句 中 制造 一 个 语法 错误 ， 即 字符 串 没 有 加 引号 ， 然 后 在 | 
catch 从 句 中 利用 参数 变量 b 获取 Error 对 象 的 引用 , 然后 提示 错误 的 详细 信息 , 最 后 在 finally 从 句 中 | 
弹出 正确 的 信息 。 | 


ty{ // 测试 代码 
alert(a); // 制作 语法 错误 
} 
catch(b){ // 捕获 错误 | 
alert(b.message): / 提示 错误 信息 | 
} | 
finally{ // 异常 后 期 处 理 | 
alert("a"); / 提示 正确 值 | 
| | 


【示例 2】 在 异常 处 理 结构 中 ，catch 和 finally 从 句 是 可 选项 目 ， 可 以 根据 需要 省 略 ， 但 在 正常 
情况 下 必须 包含 try 和 catch 从 句 。 把 上 面 示例 可 以 精简 为 如 下 所 示 。 
ty{ 
alert(a); 
} 
catch(b){} 
finally 从 句 比 较 特殊 ， 不 管 try 语句 是 否 完全 执行 ，finally 语句 最 后 都 必须 要 执行 ， 即 使 使 用 了 
跳 转 语句 跳出 了 异常 处 理 结构 ， 也 必须 在 跳出 之 前 先 执 行 finally 从 句 。 
如 果 没 有 catch 从 名，JavaScript 在 执行 完 try 从 名 之后， 继续 执行 finally 从 句 ， 如 果 发 生 异 常 ， 
会 继续 沿 着 语法 结构 链 向 上 查找 上 一 级 catch 从 句 。 
try-catch 语句 可 以 相互 嵌 套 ， 甚 至 可 以 在 内 层 try-catch 语句 中 又 与 套 男 一 个 内 层 try/catch 语句 ， 
以 及 在 该 内 层 try-catch 语句 中 再 嵌 套 一 个 try-catch 语句 ， 霸 套 的 层 数 取决 于 实际 代码 的 意义 。 
为 什么 需要 使 用 嵌 套 的 try-catch 语句 呢 ? 因为 使 用 嵌 套 的 try-catch 语句 ， 可 以 逐步 处 理 内 层 的 
try-catch 语句 抛 出 的 异常 。 
【示例 3】 下 面 代码 就 是 一 个 多 层 嵌 套 的 异常 结构 ， 在 处 理 一 系列 的 异常 时 ， 内 层 的 catch 子 句 
通过 将 异常 抛 出， 就 可 以 将 异常 抛 给 外 层 的 catch 子 句 来 处 理 。 


ty{ / 外 层 异 常 处 理 结构 | 
ty{ // 内 层 异 常 处 理 结构 | 
alret("Hi"): // 错误 引用 方法 | 
| 
catch(exception){ | 
vare: | 
if(! exception.description){ // 兼容 非 正 浏览 器 
€=exception name': // 获取 错误 名 称 | 
} | 
ea // 兼容 正 浏 览 器 | 
© =exception.description: / 获取 错误 描述 信息 
} 


让 (人 e 一 "Object expected" ||e — "ReferenceEror"){ 
/ 如 果 是 此 类 错误 信息 ， 则 提示 这 样 信息 
alert(" 内 层 ty-catch 能 够 处 理 这 个 错误 "): 
| 
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| eR 
else{ // 否则 再 一 次 抛 出 一 个 异常 
throw exception: 
} 
} 
catch(exception){ / 获取 内 层 异 常 处 理 结构 中 抛 出 的 异常 
alert(" 内 层 try-catch 不 能 够 处 理 这 个 错误 "); 


3.6 案例 实战 


| 下面 结合 具体 案例 讲解 各 种 语句 在 开发 中 的 应 用 技巧 。 
3.6.1 把 结构 语句 转换 为 表达 式 


灵活 使 用 JavaScript 运算 符 ， 可 以 把 复杂 的 结构 语句 转换 为 表达 式 ， 以 提升 代码 的 灵活 性 和 执行 
【示例 1】 三 元 运算 符 (?:) 在 连续 运算 中 扮演 了 重要 角色 ， 使 用 它 能 够 代 蔡 选择 结构 。 


event ? event : window.event; 


该 表达 式 相当 于 下 面 选择 结构 。 
iflevent) 

event = eVent // 如 果 支 持 Event 事件 对 象 ， 则 直接 使 用 event 
else 


| 
| event = window.event: / 如果 不 支持 Event 事件 对 象 ， 则 调用 Window 对 象 的 属性 event 
| 三 元 运算 符 不 仅 能 够 代 蔡 简单 的 选择 结构 ， 还 能 够 代替 多 重 选择 结构 。 
var a=((a — 1) ? alert(1): / 如 果 a 等 于 1， 则 提示 1 
| (a = 2) ?alert(2): / 如 果 a 等 于 2， 则 提示 2 
| (a = 3) ?alert(3): / 如果 a 等 于 3， 则 提示 3 
| (a = 4) ?alert(4): / 如 果 a 等 于 4， 则 提示 4 
alert(undefined) // 否则 提示 undefined 
// 多 个 三 元 运算 符 连续 运算 
| 上 面 是 一 个 多 条 件 的 选择 结构 , 利用 三 元 运算 符 把 它 转换 为 一 个 复杂 的 表达 式 ， 从 而 实现 连续 运 
| 算 。 为 了 便于 阅读 ， 可 以 对 表达 式 进行 格式 化 编排 ， 换 行 时 应 注意 语义 性 问题 ， 避 免 JavaScript 误解 
| 代码 。 如 果 使 用 多 选择 结构 表示 ， 则 代码 如 下 所 示 。 
switch (a) { 
case 1: 


| 
| alert(]): 
| 
| 
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从 上 面 代码 可 以 看 到 , 连续 运算 的 代码 更 简练 , 连续 运算 的 结果 还 是 可 以 继续 参与 到 其 他 表达 式 | 
中 ， 这 对 于 多 重 选择 结构 是 无 法 实现 的 。 

表达 式 运 算 本 质 上 是 值 运算 ， 任 何 复杂 的 对 象 都 可 以 转换 为 值 。 由 于 运算 只 产生 值 ， 因 此 可 以 把 
所 有 语句 都 转换 为 表达 式 ， 并 进行 求 值 。 

【示例 2】 针 对 示例 1， 也 可 以 使 用 布尔 型 表达 式 来 转换 选择 结构 。 


vara=((a = 1) && alert(1) // 如 果 a 等 于 1， 则 提示 1 | 
1 一 2) && alert(2) / 如 果 a 等 于 2， 则 提示 2 | 
la 一 3) && alert(3) / 如 果 a 等 于 3， 则 提示 3 | 
|@ = 4 &e& alert(4) / 如 果 a 等 于 4， 则 提示 4 | 
llalert(undefined ) / 否则 提示 undefined | 

); / 多 个 逻辑 表达 式 连续 运算 


上 面 代码 主要 利用 迪 辑 运算 符 “&&” 和 “||” 来 执行 连续 的 运算 。 对 于 迪 辑 与 运算 来 说 ， 如 果 运 
算 符 左 侧 的 运算 元 为 rwe， 才 会 执行 右 侧 运 算 元 的 计算 ， 否 则 就 会 忽略 右 侧 的 运算 元 ， 而 对 于 迪 辑 或 
运算 来 说 ,如 果 运 算 符 左 侧 的 运算 元 为 false, 才 会 执行 右 侧 运 算 元 的 计算 ,否则 就 会 忽略 右 侧 的 运算 
元 。 邮 辑 与 和 迪 辑 或 的 配合 使 用 可 以 实现 三 元 运算 符 的 逻辑 功能 。 
【示例 3】 对 于 循环 结构 也 可 以 通过 递归 运算 实现 连续 运算 的 目的 。 
for (vari=1;i<100:iD) { 


document. write(D); | 
} | 
上 面 的 循环 结构 可 以 使 用 如 下 的 递归 函数 来 表示 。 | 
ET 7 声明 全 局 变量 i， 并 初始 化 | 
(fanction 0 { // 定义 匿名 函数 | 
document.write(): // 可 以 执行 语句 | 
(Hi< 100) && .callee(): | 
// 如 果 递 增 后 的 变量 i 小 于 100， 则 执行 递归 运算 | 
»0 // 调用 函数 | 
对 于 上 面 代码 可 以 使 用 如 下 嵌 套 函数 进行 进一步 的 封装 ， 从 而 实现 一 个 完整 的 表达 式 运算 。 | 
(fanction 0 { | 
vari=1; | 
Tetum function | { | 
document-write(i): // 可 以 执行 语句 | 
(HH < 100) && arguments.callee0: / 有 条 件 递 归 运 算 
} 
D00 // 调用 函数 的 返回 函数 
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| 您 提示 : 由 于 函数 递归 运算 需要 为 每 次 函数 调用 保留 信息 ， 因 此 会 浪费 系统 资源 。 建议 使 用 尾 递归 
| 可 以 避免 此 类 问题 。 
| 
| 
3.6.2 ”优化 选择 运算 性 能 
使 用 查 表 法 访问 数据 比 使 用 站 或 switch 结构 查找 速度 更 快 ， 特 别 是 在 条 件数 目 非常 巨大 的 环境 
助 于 保持 代码 的 可 读 性 。 


【示例 1】 在 下 面 代码 中 ， 使 用 switch 检测 value 值 。 


function map(value) { 
switch (value) { 


Teturn "resultS"; 
Case 6: 
Teturn "result6"; 


return "result8"; 
Case 9: 
| return "result9"; 
| default: 
| return "result10": 


| 【示例 2】 使 用 switch 语句 检测 value 值 的 方法 比较 笨重 ， 针 对 上 面 代码 可 以 使 用 一 个 数组 查询 
| 蔡 代 switeh 结构 块 。 下 面 代码 把 所 有 可 能 值 存储 到 一 个 数组 中 , 然后 通过 数组 下 标 快速 检测 元 素 的 值 。 
| function map(value) { 
Var results = ["resultO", "result1". "result2". "result3", "result4". 
"result5", "result6", "result7", "result8", "result9", "result10"] 


Tetum results[value]: 
} 
| 使 用 查 表 法 可 以 消除 所 有 条 件 判断 ， 由 于 没有 条 件 判断 ， 当 候选 值 数量 增加 时 ， 基 本 上 不 会 增加 
| 额外 的 性 能 开销 。 


| 查 表 法 适用 于 键 与 值 形成 的 逻辑 映射 ， 而 switch 结构 更 适合 根据 键 完成 特定 操作 的 场合 。 
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【示例 3】 如 果 条 件 查询 中 键 名 不 是 有 序数 字 ， 则 无 法 与 数组 下 标 映 射 ， 这 时 可 以 使 用 对 象 进行 | 
function map(value) { 
var results= { 
"a": "resultO", "b": "result1", "c": "result2",."d": "result3", "e": 
"result4","f": "resultS", "g": "result6", "h": "result7", "i": 
"Tresult 8", "j": "result9", "k": "result10" 


} 
Tetum results[value]: 
} 


3.6.3 ”优化 循环 运算 性 能 


影响 循环 性 能 的 两 个 主要 因素 如 下 。 
每 次 迭代 做 什么 。 
友人 代 的 次 数 。 
通过 减少 这 两 个 因素 中 一 个 或 全 部 的 执行 时 间 ， 可 以 提高 循环 的 整体 性 能 。 
【示例 1】 看 看 下 面 3 种 循环 体 结构 。 
/ 方法 1 
for (vari= 0; i < items.length; i++) { 
process(items[i]); 


} 

/ 方法 2 

varj=0; 

while (j < items.length) { 
process(items[j++H]): 


Process(items[k++]): 
} while (k < items.length): 
在 每 个 循环 中 ， 每 次 运行 循环 体 都 要 发 生 如 下 操作 。 
(1) 在 控制 条 件 中 读 一 次 属性 〈items.length )。 
(2) 在 控制 条 件 中 执行 一 次 比较 (i < items.length)。 
(3) 比较 操作 ， 观 察 条 件 控制 体 的 运算 结果 是 不 是 true (i < items.length 一 true)。 
(4) 一 次 自 加 操作 (it+)。 
(5) 一 次 数组 查找 (items[i])。 
(6) 一 次 函数 调用 (process(items[i]))。 
在 这 些 简单 的 循环 中 ， 即 使 没有 太 多 的 代码 ， 每 次 迭代 也 都 要 进行 这 6 步 操作 。 代 码 运行 速度 很 
大 程度 上 由 processO 对 每 个 项 目的 操作 所 决定 ,即便 如 此 ,减少 每 次 选 代 中 操作 的 总 数 也 可 以 大 幅度 
提高 循环 的 整体 性 能 。 
优化 循环 的 第 一 步 是 减少 对 象 成 员 和 数组 项 查找 的 次 数 。 在 大 多 数 浏览 器 上 , 这些 操作 比 访问 局 
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| 部 变量 或 直接 量 需 要 更 长 时 间 。 例如 ， 在 上 面 代码 中 ,每 次 循环 都 查找 items.length， 这 是 一 种 浪费 ， 
| 因为 该 值 在 循环 体 执行 过 程 中 不 会 改变 ， 因 此 产生 了 不 必要 的 性 能 损失 。 

| 【示例 2】 可 以 简单 地 将 此 值 存 入 一 个 局 部 变量 中 ， 在 控制 条 件 中 使 用 这 个 局 部 变量 ， 从 而 提高 
合 内 了 循环 性 能 . 

| 


preceslicnlly 
| } 
| varj =0, count =items.length: 
| while <counb { 
Process(items[j++]): 
| 
} 
| vark=O0num=itemslength: 
| dof 
process(items[k++]); 
| } while (k < num):; 
这 些 重 写 后 的 循环 只 在 循环 执行 之 前 对 数组 长 度 进行 一 次 属性 查询 , 使 控制 条 件 中 只 有 局 部 变量 
| 参与 运算 ， 所 以 速度 更 快 。 
| 还 可 以 通过 改变 循环 的 顺序 来 提高 循环 性 能 。 通常 ,数组 元 素 的 处 理 顺 序 与 任务 无 关 , 可 以 从 最 
| 后 一 个 开始 ， 直 到 处 理 完 第 一 个 元 素 。 倒 序 循环 是 编程 语言 中 常用 的 性 能 优化 方法 ， 不 过 一 般 不 太 容 
| 易 理解 。 
| 
| 【示例 3】 在 JavaScript 中 ， 倒 序 循环 可 以 略微 提高 循环 性 能 。 
for(vari=itemslength: i—;) { 
process(items[i]); 
| . 
| varj=itemslength: 
| while 0) { 
Process(items[j]): 
Vark= items.length-1: 
dof 
process(items[k]): 
} while (kK—): 
| 在 上 面 代码 中 使 用 了 倒序 循环 ,并 在 控制 条 件 中 使 用 了 减法 。 每 个 控制 条 件 只 是 简单 地 与 0 进行 
| 比较。 控制 条 件 与 true 值 进行 比较 ， 任 何 非 零 数字 自动 强制 转换 为 tue， 而 0 等 同 于 false。 
| 实际 上 , 控制 条 件 已 经 从 两 次 比较 减少 到 一 次 比较 。 将 每 个 迭代 中 两 次 比较 减少 到 一 次 可 以 大 幅 
| 度 提高 循环 速度 。 通 过 倒序 循环 和 最 小 化 属性 查询 , 可 以 看 到 执行 速度 比 原始 版 本 提升 了 50% 一 60%。 
与 原始 版 本 相 比 ， 每 次 迭代 中 只 进行 如 下 操作 。 
| (1) 在 控制 条 件 中 进行 一 次 比较 (i 二 true)。 
| (2) 一 次 减法 操作 (i)。 
| (3) 一 次 数组 查询 (items[i])。 
| (4) 一 次 函数 调用 (process(items[i]))。 
| 新 循环 的 每 次 迭代 中 减少 两 个 操作 ， 随 着 迭代 次 数 的 增长 ， 性 能 将 显著 提升 。 


。92 。 


第 3 章 JavaScript 程序 结构 设计 一 ES : 


3.6.4 ”设计 杨辉 三 角 


杨辉 三 角 是 一 个 经 典 、 有 趣 的 编程 案例 ， 它 揭示 了 多 次 方 二 项 式 展开 后 各 项 系数 的 分 布 规律 ， 如 | 
图 3.4 所 示 。 | 


LL 35 0 10..5 

图 3.4 高 次 方 二 项 式 开 方 之 后 各 项 系数 的 数 表 分 布 规律 | 
从 杨辉 三 角形 的 特点 出 发 ， 可 以 总 结 出 下 面 两 点 运算 规律 。 | 
设 起 始 行为 第 0 行 ， 第 N 行 有 N+1 个 值 。 | 

设 N>=2， 对 于 第 N 行 的 第 J 个 值 : 
> 当 王 1 或 三 N+l 时 ， 其 值 为 1。 | 
> JI=1 且 JI=N+1 时 : 其 值 为 第 N-1 行 的 第 本 1 个 值 与 第 N-1 行 第 J 个 值 之 和 。 | 
使 用 递归 算法 可 以 求 指定 行 和 列 交叉 点 的 值 ， 具 体 设计 函数 如 下 。 | 
function c(x.y) { /1 求 指定 行 和 列 的 数字 ， 参 数 x 表示 行 数 ， 参 数 y 表 示 列 数 | 
if(y—=D | (y=x+ D)retum 1: // 如 果 是 第 一 列 或 最 后 一 列 ， 则 取 值 为 1 | 
Tetum c(x-1,y-1) + c(x-1,y); | 
// 通过 递归 算法 求 指定 行 和 列 的 值 ，x-1 表示 上 一 行 ， 返 回 上 一 行 中 第 y-1 列 与 第 y 列 值 之 和 | 
} | 


然后 输出 每 一 行 每 一 列 的 数字 : 


for (vari=0:i<=n:it+) { / 遍历 寡 数 | 
for (varj=1:j<i+2:j+D{ / 遍历 每 一 列 | 
Print(c(i)); // 调用 求 值 函数 ， 输 出 每 一 个 数字 | 
} 
print("<br />"): / 换行 
} 


使 用 递归 算法 思路 比较 清晰 ， 代 码 简 洁 ,但 是 它 的 缺点 也 很 明显 : 执行 效率 非常 低 ， 特 别 是 宕 数 
很 大 时 ， 其 执行 速度 异常 缓慢 ， 甚 至 于 宕 机 。 所 以 ， 我 们 有 必要 对 其 算法 做 进一步 的 优化 。 

定义 两 个 数组 , 数组 1 为 上 一 行 数 字 列 表 , 为 已 知 数组 ; 数组 2 为 下 一 行 数 字 列表 , 为 待 求 数组 。 
假设 上 一 行 数组 为 [1,1], 即 第 二 行 数字 .那么 , 下 一 行 数 组 的 元 素 值 就 等 于 上 一 行 相 邻 两 个 数字 的 和 ， | 
即 为 2， 然 后 数组 两 端的 值 为 1， 这 样 就 可 以 求 出 下 一 行 数组 ， 即 第 三 行 数字 列表 。 求 第 四 行 数 组 的 | 
值 ， 可 以 把 已 计算 出 的 第 三 数组 作为 上 一 行 数组 ， 而 第 四 行 数字 为 待 求 的 下 一 行 数组 ， 依 此 类 推 。 | 

实现 上 述 算法 ， 可 以 使 用 双 层 循环 霸 套 结构 ， 外 层 循环 结构 遍历 高 次 方 的 笃 数 〔 即 行 数 )， 内 层 | 
循环 遍历 每 次 方 的 项 数 〈 即 列 数 )， 实 现 的 核心 代码 如 下 。 

varal =[1. 1]: // 上 一 行 数组 ， 初 始 化 为 [1, 1] 

vara2 = [1. 1]; / 下 一 行 数组 ， 初 始 化 为 [1. 1] 
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for (vari=2;i<=n:itt) { // 从 第 3 行 开始 遍历 高 次 方 的 军 数 ，n 为 宕 数 
a2[0] = 1: // 定义 下 一 行 数组 的 第 一 个 元 素 为 1 
for (varj=1:j<i- LD { / 遍历 上 一 行 数组 ， 并 计算 下 一 行 数组 中 间 的 数字 
a20]=alj ~ 1]+al0]: 
} 
a2[j]=1; // 定义 下 一 行 数组 的 最 后 一 个 元 素 为 1 
for (var k=0; k <=j: kt) { // 把 上 一 行 数组 的 值 传递 给 上 一 行 数组 ， 从 而 实现 交 蔡 循环 
al[k] = a2[k]: 
是 
完成 算法 设计 之 后 ， 就 可 以 设计 输出 数 表 ， 完 整 代码 如 下 ， 演 示 效 果 如 图 3.5 所 示 。 
<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title> 输 出 杨辉 三 角 </title> 
<script type="text/javascript"> 
function print(v) { // 输出 函数 
// 如 果 传 递 值 为 输出 的 数字 ， 则 包含 在 一 个 <span> 标 签 中 ， 以 方便 CSS 控制 
ifltypeof v — "number") { 
var W = 40; // 默 认 <span> 标 签 宽度 
ifgn>30)w=@-30)+40: / 根据 突 数 的 增 大 ， 适 当 调 整 <span> 标 签 的 宽度 
Var s = '<span style="padding:4px 2px:display: inline—block:text-align: center:width:+ w +'px:">' + V+ 


document.write(s); // 在 页 面 中 输出 字符 串 
} 
else{ /如 果 参 数值 为 字符 串 ， 说 明 是 输出 其 他 字符 串 
document write(v): // 则 调用 document 对 象 的 write0 方 法 直接 输出 
} 


} 
// 输 入 接口 ， 用 来 接收 用 户 设置 罕 数 
var n =prompt(" 请 输入 窜 数 :", 9); 。// 默认 值 为 9 


n=n-0: // 把 输入 值 转换 为 数值 类 型 

vartl =new DateO: 

varal =[1,1], a2 =[1,1]; / 声明 并 初始 化 数组 

print(<div style="text-align:center;">"); // 输出 一 个 包含 框 

print(1); / 输出 第 一 行 中 的 数字 

Print("<br 人 > 

for (vari=2:i<=n:itt) { / 从 第 三 行 开始 ， 遍 历 每 一 行 
Print(1); // 输出 每 一 行 中 第 一 个 数字 


for (varj=1:j <i-1:j) { / 从 第 2 个 数字 开始 ， 遍 历 每 一 行 
a20]=algj = 1] +al0]: 


print(a2[j]): // 输出 每 一 行 中 中 间 的 数字 

} 

a2[j] = 1; // 补 上 最 后 一 个 数组 元 素 的 值 

for (var k=0:k <=j: k++) { / 把 上 一 行 数组 的 值 传递 给 下 一 行 数组 
al[k] = a2[k]: 

} 

Print(1): // 输出 每 一 行 中 最 后 一 个 数字 
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print("<br />"); 1/ 输出 换行 符 
) 
Print("</div>"): / 输出 包含 框 的 封闭 标签 
Var t2 =new Date(): 
print("<p style='text-align:center;> 耗 时 为 (毫秒 ): "+(t2 -tl)+"</p>"); 
</script> 
</head> 
<body> 
<Jbody> 
<htm> 
I | 
3 ES x | 
| 
| 
桂 时 为 (可 秒 ) ，3 | 
| 
3.5 9 次 幕 杨辉 三 角 数 表 分 布 图 | 
| 
3.6.5 “编程 题 


(1) 编写 函数 输出 1~10 000 的 所 有 对 称 数 。 
容 提示 : 对 称 数 就 是 把 一 个 数字 倒 着 读 和 原 数字 相同 的 数字 ， 如 121、1331 等 。 参 考 如 下 。 


function symmetry(num) { 
var arr = []; 
while (—num > 10) { 
// 依次 把 每 个 值 劈 开 为 多 个 数字 组 成 的 数组 ， 然 后 颠倒 顺序 
/ 再 重新 连接 为 一 个 数字 字符 串 
Var reverseNum = num. split(").reverse().join("): 
// 比较 颠倒 后 的 值 是 否 与 原 值 相等 ， 如 果 相等 则 存储 到 临时 数组 中 
(reverseNum — num) && (arr.push(num)): 
} 
Tetum arr: 


上 
var result = symmetry(10000): 
console.log(result): 


(2) 实现 乱 序 函数 randomSort(array), 能 够 将 数组 元 素 打 乱 存储 ， 如 [1,2,3,4,5], 输出 为 [3,2,4,5,1]。 
要 求 N 次 以 内 数组 元 素 顺序 不 重复 ， 参 考 如 下 。 
function randomSort(array) { 
var n = array.length. t, i: 


i=Math .random0 *n 一 |0: ”// 获取 数组 长 度 内 一 个 随机 数 
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(4) 分 别 用 while 语句 和 for 语句 编写 1+2+..….+100 的 求 和 程序 ， 参 考 如 下 。 
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使 用 数组 


数组 ( Array ) 是 合成 类 型 的 数据 ， 属 于 引用 型 对 象 ， 不 可 作为 简单 的 值 来 操作 。 数 组 
是 一 组 有 序 排列 的 数据 集合 ， 数 组 中 每 个 值 被 称 为 元 素 ， 每 个 元 素 的 索引 位 置 被 称 为 下 标 ， 
下 标 值 从 0 开始 ， 有 序 遂 增 。 元 素 的 值 没有 类 型 限制 ， 数 组 的 长 度 不 固定 ， 可 以 任意 修改 。 


【 学 习 重 点 】 

WI 正确 定义 数组 
WI 正确 使 用 数组 
MI 灵活 应 用 数组 
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4.1 数组 基础 


本 节 介绍 数组 的 定义 、 数 组 的 读 写 等 基本 操作 。 


4.1.1 定义 数组 


定义 数组 有 两 种 方法 ， 具 体 说 明 如 下 。 
1. 构造 数组 

使 用 new 运算 符 调用 AmrayO 函 数 时 ， 可 以 创建 一 个 新 数组 。 

【示例 1】 调 用 Array0 构 造 函 数 时 ， 如 果 没 有 传递 参数 ， 可 以 创建 一 个 空 数组 。 


var a = new Array(); // 空 数组 
当 调 用 Array0 构 造 函 数 时 ， 可 以 指定 数组 元 素 的 值 。 
var a=new Array(l,true,"string",[1,2], {x: 1.y: 2)): 1/ 实数 组 


在 参数 列表 中 ， 每 个 参数 指定 一 个 元 素 的 值 ， 值 的 类 型 不 受 限制 。 参 数列 表 的 顺序 是 数组 元 素 的 


| 大 序 ， 从 数组 下 标 0 开始， 数组 的 length 属性 值 等 于 参数 列表 的 个 数 。 


| 二 


| 数组 。 
1 


Var arr = new Array(2); 
/ 等 同 于 
Var arr = Array(2): 
【示例 2】 如 果 仅 传 递 一 个 数值 参数 ， 可 以 定义 指定 长 度 的 数组 。 
var a =new Array(5); // 指定 长 度 的 数组 


在 这 种 形式 中 ， 参 数值 等 于 数组 的 length 属性 值 ， 每 个 元 素 的 值 默认 为 undefined。 
但 是 ， 如 果 传 递 的 数值 超出 范围 ， 会 导致 异常 。 


/ 非 正 整数 的 数值 作为 参数 ， 会 报错 
new Array(3.2) /RangeError: Invalid array length 
new Array(-3) “ /RangeError: Invalid array length 


可 以 看 到 ，Array 作为 构造 函数 ， 行 为 很 不 一 致 。 因 此 ， 不 建议 使 用 它 生成 新 数组 。 
2. 数组 直接 量 

数组 直接 量 是 指 在 中 括号 运算 符 中 包含 多 个 值 列表 ， 以 逗号 进行 分 隔 。 

【示例 3】 下 面 使 用 数组 直接 量 定义 一 个 空 数组 和 一 个 长 度 为 5 的 数组 。 


vara=[]: / 空 的 数组 直接 量 
Var a= [1,true,"string".[1.2]. {x: 1.y: 2}]: / 包含 具体 元 素 的 数组 直接 量 


使 用 数组 直接 量 可 以 快速 定义 数组 ， 是 一 种 快捷 、 高 效 的 方式 ， 推 荐 读者 们 使 用 这 种 方法 定义 
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4.1.2 定义 多 维 数组 


JavaScript 不 支持 多 维 数组 ， 但 是 可 以 通过 数组 嵌 套 的 形式 定义 多 维 数组 。 
【示例 1】 下 面 代码 定义 一 个 二 维 数组 。 


vara=[ // 定义 二 维 数组 
[e231 
[4, 5, 6], 
[7. 8. 9] 

]: 


| 
【示例 2】 下 面 示例 演示 如 何 使 用 嵌 套 的 for 语句 定义 一 个 二 维 数组 ， 来 存储 1~100 的 整数 值 ， | 
从 而 设计 一 个 简单 的 二 维 数列 。 | 


vara=[] / 二 维 数组 
for (vari=0;i<10;itt) { / 行 循环 | 
var b=[]; // 辅助 数组 | 
for (varj=0:j <10:j+n) { // 列 循环 | 
blj] =i*10+j+1; // 定义 数组 b 的 元 素 值 | 
} | 
al]=b; / 把 数组 b 赋值 给 数组 a | 
} | 
alert(a): // 返回 1 一 100 的 二 维 数列 | 
数列 样式 如 下 所 示 。 | 
a 


[2 3 4 6 NO] 

[11, 12, 13, 14, 15. 16. 17, 18, 19. 20], 
[21, 22, 23, 24, 25, 26, 27. 28, 29, 30], 
[31. 32, 33, 34, 35, 36. 37. 38, 39, 40], 
[41. 42. 43, 44. 45. 46. 47. 48. 49. 50]. 
[51. 52. 53. 54. 55. 56. 57. 58. 59. 60]、 
[61, 62. 63, 64, 65, 66. 67. 68, 69, 70], 
[71, 72, 73. 74, 75, 76. 77. 78, 79, 80], 
[81, 82, 83, 84, 85, 86, 87. 88, 89, 90], 
[91, 92, 93, 94. 95, 96. 97. 98, 99, 100] 


EE 
4.1.3” 读 写 数 组 


读 写 数组 中 元 素 的 值 可 以 通过 中 括号 运算 符 〈[]) 来 实现 。 中 括号 运算 符 左 侧 是 数组 标识 符 ， 中 
括号 内 包含 数组 元 素 的 下 标 。 
【示例 1】 下 面 代码 使 用 中 括号 运算 符 存 取 数 组 。 


var a= []: / 声明 一 个 空 数 组 

a[0] = 1: // 为 数组 第 1 个 元 素 赋值 为 1 

al1l] =2: // 为 数组 第 2 个 元 素 赋值 为 2 

alert(a[0]): / 读 取 数组 第 1 个 元 素 的 值 ， 返 回 值 为 1 
alert(a[1]): // 读 取 数 组 第 2 个 元 素 的 值 ， 返 回 值 为 2 
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”党 提示 : 下 标 可 以 为 非 抽 整数 的 表达 式 ， 只 要 确保 返回 值 为 非 抽 整数 即 可 。 
【示例 2】 下 面 示例 使 用 for 语句 批量 为 数组 元 素 赋值 。 


Var a= new ArrayO: // 创建 一 个 空 数组 
for(vari=0;i<10;i++) { // 循环 为 数组 赋值 
afi++r]=+H 宇 // 不 按 顺 序 为 数组 元 素 赋值 
上 
| alert(a): 1/ 返回 2,,,5 ,,,8,,, 11 


在 上 面 示例 中 ， 数 组 下 标 是 一 个 不 断 递增 的 表达 式 。 
忘 提示 : 数组 可 以 先 定义 ， 后 赋值 ; 也 可 以 在 定义 时 赋值 ， 如 下 面 示例 所 示 。 
【示例 3】 读 写 多 维 数组 ， 只 需 连 续 使 用 多 个 中 括号 运算 符 即 可 。 


vara=[ // 定义 二 维 数组 

| [i 

| [4.5,6], 

| [7.89] 

| 下 

| alert(a[OJ[O]) // 返回 1， 读 取 第 1 个 元 素 的 值 
alert(a[2][2]) // 返回 9， 读 取 第 9 个 元 素 的 值 


存 取 多 维 数组 时 ， 左 侧 中 括号 内 的 下 标 值 不 能 超出 数组 实际 下 标 ， 否则 就 会 抛 出 异常 。 因 为 如 果 
回 第 一 个 中 括号 下 标 超 出 , 则 读 取 元 素 值 为 undefined, 显然 表达 式 undefined[2] 是 错误 的 。 
【拓展 】 

从 本 质 上 分 析 ， 数 组 是 属于 一 种 特殊 的 对 象 。typeof 运算 符 返回 数组 的 类 型 是 
线 上 阅读 ”Object。 如 何 理解 数组 的 本 质 ， 感 兴趣 的 读者 可 以 扫 码 补充 阅读 。 


4.1.4 数组 长 度 


JavaScript 为 Array 原型 预定 义 length 属性 ，length 属性 能 够 动态 存储 数组 包含 元 素 的 个 数 。 
【示例 1】length 属性 值 是 根据 最 大 下 标 值 加 1 来 确定 。 对 于 非 连续 性 的 数组 ，length 属性 可 能 
与 实际 元 素 个 数 不 一 致 。 


| var a=[]; // 声明 空 数组 

| a[0] =0: 

| a[2] = 2: 

| alert(a.length): / 返回 3 

| 在 上 面 代码 中 仅 给 下 标 为 0 和 2 的 元 素 赋值 ，JavaScript 会 自动 增加 下 标 为 1 的 元 素 ， 默 认 值 为 
| undefined。 


< 狼 注意 : 使 下 标 值 必须 是 大 于 等 于 0, 且 小 于 232- 1 的 整数 . 如 果 下 标 值 为 负数 、 浮 点 数 、 布尔 值 、 
对 象 或 者 其 他 值 ，JavaScript 会 自动 把 它 转换 为 一 个 字符 囊 ， 生 成 类 数组 。 
【示例 2】length 属性 存储 的 是 一 个 动态 值 ， 当 添加 新 元 素 时 ， 它 的 值 会 自动 更 新 。 结 合 示例 1， 
| 添加 如 下 2 行 代码 ， 可 以 看 到 length 属性 值 自动 更 新 为 新 的 值 ， 以 实时 反映 数组 的 长 度 。 
| a[200] = 200: 
| alert(a.length): // 返回 201 


“00° 


第 企 章 使 用 数组 CR T 
CC | 


| 

数组 的 length 属性 值 可 读 可 写 : 如 果 设置 值 比 当 前 length 值 小 , 则 数组 将 被 删节 ， 新 长 度 之 外 的 | 

元 素 被 丢失 ， 如 果 设 置 值 比 当前 length 值 大 ， 则 数组 将 会 新 增 元 素 ， 确 保 数组 长 度 一 致 ， 新 增 元 素 的 | 
默认 值 为 ndefined。 ! 


Var a=[1,2,3]; // 声明 数组 直接 量 

alength = 5; / 增长 数组 长 度 

alert(a[4]): // 返回 undefined， 说 明 该 元 素 还 没有 被 赋值 
alength = 2; // 缩短 数组 长 度 

alert(a[2]): // 返回 undefined， 说 明 该 元 素 的 值 已 经 丢失 


提示 : 将 数组 清空 的 一 种 有 效 方法 ， 就 是 设置 length 属性 值 为 0。 例如: 


var arr = ['a’, b', 'c']; 


arrlength = 0: | 

ar 省 | 

如 果 设 置 length 属性 值 为 非 负 整数 或 其 他 类 型 的 值 ，JavaScript 将 会 抛 出 | 
RangeError 错误 。 | 
【拓展 】 | 


由 于 数组 本 质 上 是 对 象 的 一 种 ， 所 以 可 以 为 数组 添加 属性 (关联 数组 ), 但 是 这 
不 影响 length 属性 值 ， 具 体 说 明 请 扫 码 阅读 。 


4.1.5 ”类 数组 


如 果 一 个 对 象 的 所 有 键 名 都 是 正 整 数 或 零 ， 并且 有 length 属性 ， 那 么 这 个 对 象 就 很 像 数 组 ,语法 | 
上 称 为 “类 似 数组 的 对 象 ”(Array-like Object)， 简 称 为 类 数组 或 伪 类 数组 。 

类 数组 是 JavaScript 语言 最 具 特 色 的 语法 特征 , 它 体现 了 JavaScript 语言 的 灵活 
性 。 深 刻 理解 和 灵活 使 用 类 数组 ， 对 于 JavaScript 高 级 编程 至 关 重 要 。 考 虑 到 类 数 
组 跨越 数组 ， 涉 及 对 象 和 函数 等 相关 知识 点 ， 本 节 仅 作 选 学 内 容 在 线 呈现 ， 推 荐 读 
者 在 未 来 需要 时 认真 阅读 。 


4.1.6 检测 数组 


使 用 运算 符 in 可 以 检测 某 个 键 名 是 否 存 在 于 数组 中 。 注 意 ，in 运算 符 适用 于 对 象 ， 也 适用 于 
数组 。 

【示例 1】 下 面 代码 表明 ， 数 组 存在 键 名 为 2 的 键 。 由 于 键 名 都 是 字符 串 ， 所 以 数值 2 会 自动 转 
成 字符 串 。 

var arr = ['a', b', 'c]: 

2inar /tire 

2inar /tme 

4in ar // false 


【示例 2】 如 果 数 组 的 某 个 位 置 是 空位 ，in 运算 符 将 返回 false。 


Var arr = []: 
arr[100] = "a': 
100inar //trmue 
linar  //false 
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| 这 
在 上 面 代码 中 ， 数 组 arr 只 有 一 个 成 员 ar[100]， 其 他 位 置 的 键 名 都 会 返回 false。 


| pe 
”会 提示 : 什么 是 空位 ， 请 参考 4.1.8 节 专题 讲解 。 


4.17 遍历 数组 


使 用 数组 的 forEach0 方 法 、for-in 语句 结构 以 及 Object.keys0 方 法 都 可 以 遍历 数组 元 素 。 
国 | forin 循环 不 仅 可 以 遍历 对 象 ， 也 可 以 遍历 数组 ， 毕 竟 数 组 只 是 一 种 特殊 对 象 。 例 如 : 

var a=[1,2,3]; 

for (variin a) { 

console.log(a[i]); 


| 

| 国 
| /1 
/2 
/3 


【示例 1】forin 不 仅 会 遍历 数组 所 有 数字 键 ， 还 会 遍历 非 数 字 键 。 


vara=[1.2.3]; 
afoo = true; 

| for (var key in a) { 
| console.log(key): 
| 

| /0 

| 

/2 

/foo 


| 
| 上 面 代码 在 遍历 数组 时 ， 也 遍历 到 了 非 整数 键 foo。 所 以 ， 不 推荐 使 用 for-in 遍历 数组 。 
| 【示例 2】 遍 历数 组 可 以 考虑 使 用 for 循环 或 while 循环 。 


var a= [1.2. 3]; 
// for 循环 
for (var i= 0: i< a.length: i++) { 
console.log(a[i]): 
} 
// while 循环 
Vari=0: 
while (i < a.length) { 
console.log(a[i]): 
itt:; 
} 
var 1 = a.length; 
while (oO { 
console.log(a[l]): 
上} 
| 上 面 代码 是 3 种 遍历 数组 的 常规 用 法 。 最 后 一 种 写法 是 逆向 遍历 , 即 从 最 后 一 个 元 素 向 第 一 个 元 
| 素 遍历 。 
| 
| 数组 的 forEach0 方 法 ， 也 可 以 用 来 遍历 数组 ， 详 细 说 明 请 参考 下 面 章节 内 容 。 
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【示例 3】 结 合 让 条 件 语 句 ， 可 以 过 滤 数 组 ， 如 检索 数组 中 包含 字符 串 类 型 的 元 素 。 
var a=[1,2,true,"a"."b"]: / 定义 数组 
for(vari=0:i<alength: i++) { / 遍历 数组 
if (typeof afi] 一 "string") 
// 如 果 数 组 元 素 的 类 型 为 字符 串 ， 则 返回 该 元 素 的 值 
alert(ali]); 


4.1.8 ”空位 数组 | 
| 

当 数组 的 某 个 下 标 位 置 是 空 元 素 ， 即 两 个 去 号 之 间 没有 任何 值 ， 称 该 数组 存在 空位 (Hole)。 | 
例如 : | 


vara=[1, ,1]; 
alength//3 


| 
上 面 代码 表明 ， 数 组 的 空位 不 影响 length 属性 。 | 
| 


< 所 注意 : 如 果 最 后 一 个 元 素 后 面 有 过 号 ， 并 不 会 产生 空位 。 也 就 是 说 ， 有 没有 这 个 喜 号 ， 结 果 都 一 | 
样 。 例 如 : 

vara= [1,2,3,]; 

alength /3 

a 1/ [1,2,3] 

在 上 面 代码 中 ， 数 组 最 后 一 个 成 员 后 面 有 一 个 逗号 ， 这 不 影响 length 属性 的 值 ， 与 没有 这 个 逗号 
时 效果 一 样 。 

【示例 1】 数 组 的 空位 是 可 以 读 取 的 ， 返 回 undefined。 

vara=[,, ,J; 

al1] // undefined 

使 用 delete 运算 符 删除 一 个 数组 成 员 ， 会 形成 空位 ， 但 不 会 影响 length 属性 。 

vara=[1.2.3]: 


delete a[1]; 
a[]] /undefined 
alength /3 


上 面 代码 用 delete 命令 删除 了 数组 的 第 2 个 元 素 ， 这 个 位 置 就 形成 了 空位 ， 但 是 对 length 属性 没 
有 影响 。 即 length 属性 不 过 滤 空位 。 所 以 ， 使 用 length 属性 进行 数组 遍历 ， 一 定 要 非常 小 心 。 
【示例 2】 数 组 的 某 个 位 置 是 空位 ， 与 某 个 位 置 是 undefined 不 一 样 。 如 果 是 空位 ， 使 用 数组 的 
forEach() 方 法 、for-in 结构 以 及 Objectkeys() 方 法 进行 遍历 ， 空 位 都 会 被 跳 过 。 
vara=[...]: 


aforEach(function(x. i) { 


console.log(i+".'+x): 


) 

/ 不 产生 任何 输出 

for (var iin a) { 
console.log(D): 

| 
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| 已 
| 、 p> | 
| / 不 产生 任何 输出 
| Objectkeys(a) 
| wn 
会 内 | 【示例 3】 如果 某 个 位 置 是 undefined， 遍 历时 就 不 会 被 跳 过 。 
ley | var a = [undefined., undefined., undefined]: 


| a.forEach(function(x. iD { 
console.log(i+".'+x): 


//2. undefined 
for (variin a) { 
console.log(i); 

} 

/0 

/1 

/2 

Objectkeys(a) 

/ro 2 

这 就 是 说 ， 空 位 就 是 数组 没有 这 个 元 素 ， 所 以 不 会 被 遍历 到 ， 而 undefined 则 表示 数组 有 这 个 元 
素 ， 值 是 undefined， 所 以 遍历 不 会 跳 过 。 


4.2 使 用 Array 


Amray 是 JavaScript 标准 库 对 象 ，Array 类 型 预定 义 了 大 量 原 型 方法 ， 所 有 数组 对 象 都 继承 这 些 方 
| 法 ， 灵 活 使 用 这 些 方法 ， 可 以 解决 很 多 实际 问题 。 


提示 : Array 也 是 一 个 构造 函数 ， 可 以 用 它 定义 新 数组 ， 详 细 说 明 可 参考 4.1.1 节 内 容 。 


4.2.1 判断 数组 
ArrayisArray 是 一 个 静态 方法 ， 直 接 引用 来 判断 一 个 值 是 否 为 数组 。 它 可 以 弥补 typeof 运算 符 的 
不 足 。 例 如 : 


var a= [1.2, 3]; 

typeof a // "object" 

Array.isArray(a) // trmue 

在 上 面 代码 中 ，typeof 运算 符 只 能 显示 数组 的 类 型 是 Object， 而 ArrayisArray 方法 可 以 对 数组 返 
9| true。 


4.2.2 ”增删 数组 


讲解 | 使 用 delete 运算 符 只 能 删除 数组 元 素 的 值 ， 但 是 不 能 够 删除 元 素 ; 通过 修改 数组 的 length 属性 
| 值 ， 可 以 增删 数组 ， 但 是 使 用 不 灵活 。 
| 


第 企 章 使 用 数组 一 
Array 定义 4 个 原型 方法 ， 使 用 它们 可 以 增加 或 删除 数组 ， 有 具体 说 明 如 下 。 
1. push() 
push() 方 法 用 于 在 数组 的 尾部 添加 一 个 或 多 个 元 素 ， 并 返回 添加 新 元 素 后 的 数组 长 度 。 注 意 ， 该 | 
方法 会 改变 原 数 组 。 例 如 : | 


var a=[]: 
a.push(1) /1 
a.push('a'’) /2 


apush(tme, {}) /4 
a // 返回 Da' true, {}] 


| 
上 面 代码 使 用 push0 方 法 ， 先 后 往 数组 中 添加 了 4 个 元 素 。 
【示例 1】 使 用 push0 方 法 合并 两 个 数组 。 | 
var a= [1, 2, 3]; 
var b=[4. 5, 6]; | 
Array.prototype.push.apply(a, b) | 
或 者 | 
a.push.apply(a, b) 
上 上 面 两 种 写法 等 同 于 : 
apush(4. 5. 6) 
a// [1,2.3.4,5.6] 
【示例 2】push0 方 法 还 可 以 用 于 向 对 象 添加 元 素 ， 添 加 后 的 对 象 变 成 类 似 数组 的 对 象 ， 即 新 加 
入 元 素 的 键 对 应 数组 的 索引 ， 且 对 象 有 一 个 length 属性 。 
vara= {a: 1}; 
[J:push.call(a, 2): 
a // {a: 1, 0: 2, length: 1} 
Ul:push.call(a, [3]); 
a // {a: 1, 0: 2.1: [3], length: 2} 


2. pop() 
pop0 方 法 用 于 删除 数组 的 最 后 一 个 元 素 ， 并 返回 该 元 素 。 注 意 ， 该 方法 会 改变 原 数 组 。 例 如 : 
var a=['a', b', 'c']; 
apop0: ie 
a /ra'.b] 
对 空 数组 使 用 pop() 方 法 ， 不 会 报错 ， 而 是 返回 undefined。 
< 拟 注 意 : pushO0 和 pop0 方 法 结合 使 用 ， 就 构成 “后 进 先 出 ”的 栈 结构 (Stack ) 。 
3. shift() 
shift0 方 法 用 于 删除 数组 的 第 一 个 元 素 ， 并 返回 该 元 素 。 注 意 ， 该 方法 会 改变 原 数组 。 例 如 : 


p 
. 
S 
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【示例 3】 使 用 shifti0 方 法 可 以 遍历 并 清空 一 个 数组 。 
var list= [1,2,3.4.5. 6], item; 
| while (item = ST) 1 
全 fF | , console.log(item); 


者 
ore "1 


4W 注意 : push0 和 shifl0 方 法 结合 使 用 就 构成 “先进 先 出 ”的 队列 结构 ( Queue ) 。 


4. unshift() 

unshift0 方 法 用 于 在 数组 的 第 一 个 位 置 添加 元 素 ， 并 返回 添加 新 元 素 后 的 数组 长 度 。 注 意 ， 该 方 
法 会 改变 原 数 组 。 例 如 : 

vara=['a', bc]: 

a.unshift('x"): /4 

a ATx ,abc] 

【示例 4】unshift0 方 法 可 以 在 数组 头 部 添加 多 个 元 素 。 

varar=['c,'d']; 

arr.unshift('a', 'b') // 4 

alr i bel 


| 4.2.3 合并 数组 


concat0 方 法 用 于 多 个 数组 的 合并 。 它 将 新 数组 的 成 员 ， 添 加 到 原 数 组 成 员 的 后 部 ， 然 后 返回 一 
个 新 数组 ， 原 数组 不 变 。 例 如 : 

[hello].concat(['world])  //["hello", “world"] 

[hello].concat(['world]. ("1"]) // ["hello", “world", "!"] 

除了 接受 数组 作为 参数 ，concatO 也 可 以 接受 其 他 类 型 的 值 作为 参数 。 它 们 会 作为 新 的 元 素 ， 添 
加 数组 尾部 。 例 如 : 

[1.2. 3].concat(4. 5, 6) / [1. 2. 3. 4. 5. 6] 

/ 等 同 于 

[1. 2. 3].concat(4. [5. 6]) 
| [1. 2. 3].concat([4]. [5. 6]) 
| 【示例 1】 如 果 不 提供 参数 ，concat0 方 法 返回 当前 数组 的 一 个 浅 拷贝 。 所 谓 “ 浅 拷贝 ”” 指 的 是 
| 如 果 数 组 成 员 包括 复合 类 型 的 值 ( 如 对 象 )， 则 新 数组 拷贝 的 是 该 值 的 引用 。 
| var obj = {a: 1}: 
var oldArray = [obj]: 
Var newArray = oldArray.concat(): 
obj.a=2: 
newArray[0].a /2 
| 在 上 面 代 码 中 ， 原 数组 包含 一 个 对 象 ，concat( 方 法 生成 的 新 数组 包含 这 个 对 象 的 引用 。 所 以 ， 
| 改变 原 对 象 以 后 ， 新 数组 跟着 改变 。 事 实 上 ， 只 要 原 数 组 的 成 员 中 包含 对 象 ，concat0 方 法 不 管 有 没 
J 


MN 
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有 参数 ， 总 是 返回 该 对 象 的 引用 。 
【示例 2】concat0 方 法 也 可 以 用 于 将 对 象 合并 为 数组 。 


[l.concat({a: 1}, fb: 2)) /La 1}, fb: 2})] 
[0.concat(fa: 1}. [2D) // [fa: 1},2] 
[2].concat({a: 1}) 1 [2, {a: 1}] 


4.2.4 ”转换 为 字符 串 


join0 方 法 能 够 以 参数 作为 分 隔 符 ， 将 所 有 数组 成 员 组 成 一 个 字符 串 返回 。 如 果 不 提供 参数 ， 
认 用 逗号 分 隔 。 例 如 : 
vara=[1.2.3,4]: 


ajoinC ) 111234 | 

ajoin('|') 1 "1121314" | 

ajoin0 /1.2.3.4" | 

| 

【示例 1】 如 果 数 组 成 员 是 undefined 或 null 或 空位 ， 会 被 转 成 空 字符 串 。 | 

[undefined, null].join(#') VA | 
[ab]jonC-) /ab' 


【示例 2】 通 过 call0 方 法 ，join() 方 法 也 可 以 用 于 字符 串 或 类 似 数组 的 对 象 。 


Array.prototype.join.call('hello', -") Hh 
Var obj = {0: 'a', 1: 'b', length: 2}: 


Array.prototype.join.call(obj, ") //'a-b | 
【拓展 】 | 
toString0 方 法 也 能 够 返回 数组 的 字符 串 形式 ， 以 逗号 连接 。 | 
vara=[1.2.3.4.5.6.7.8.9.0]: // 定义 数组 | 
a.toString(); / 返回 字符 串 "1, 2, 3, 4, 5. 6. 7. 8, 9, 0" | 
var a=[[1, [2, 3], [4, 5]], [6. [7, [8. 9], 0]]]: ”// 定义 多 维 数组 | 
a.toString(); // 返回 字符 串 "1, 2, 3, 4, 5, 6, 7, 8, 9, 0" | 
| 


toLocaleString() 方 法 与 toString0 方 法 类 似 ， 主 要 区 别 在 于 toLocaleString() 方 法 能 够 使 用 用 户 所 在 
地 区 特定 的 分 隔 符 把 生成 的 字符 串 连 接 起 来 。 

vara=[1.2.3,4.5]: / 定义 数组 

a.toLocaleStringO: / 返回 字符 串 "1.00， 2.00 , 3.00 ,4. 00. 5 .00" 

在 上 面 代码 中 ，toLocaleString0 方 法 根据 中 国 用 户 使 用 习惯 ， 先 把 数字 转换 为 浮 点 数 之 后 再 执行 
字符 串 转换 操作 。 

valueOf0 方 法 能 够 返回 数组 本 身 。 例 如 : 

vara=[1.2.3]: 

avalueOfOV [01.2.3] 

使 用 字符 串 对象 的 split0 方 法 可 以 把 字符 串 转换 为 数组 , 与 join0 方 法 操作 正好 相反 。 该 方法 可 以 | 
指定 两 个 参数 ， 第 一 个 参数 为 分 隔 符 ， 指 定 从 哪儿 进行 分 隔 的 标记 ， 第 二 个 参数 指定 要 返回 数组 的 | 
长 度 。 | 

| 
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WW // 定义 字符 串 
s.split(" 一 "): // 返回 数组 [1, 2. 3. 4. 5] 


视频 讲解 | 


截取 数组 


ee 
| slice() 方 法 用 于 提取 原 数组 的 一 部 分 ， 返 回 一 个 新 数组 ， 原 数组 不 变 。 


| 它 的 第 一 个 参数 为 起 始 位 置 (从 0 开始 )， 第 二 个 参数 为 终止 位 置 〈 但 该 位 置 的 元 素 本 身 不 包括 
| 在 内 )。 如 果 省 略 第 二 个 参数 ， 则 一 直 返 回 到 原 数 组 的 最 后 一 个 元 素 。 例 如 : 


| vara=[a, bc]: 
| aslice(0) / [ra", "bw ve] 
| aslice(1) 1 ["rb" "e"] 
aslice(l.2)  //["b"] 
aslice(2.6) /eq 
| aslice0 M1 [ra", "br", "e"] 
| 在 上 面 代码 中 ， 最 后 一 行 slice 没有 参数 ， 实 际 上 等 于 返回 一 个 原 数 组 的 拷贝 。 
| 【示例 1】 如 果 slice0 方 法 的 参数 是 负数 ， 则 表示 倒数 计算 的 位 置 。 
var a=[a', bc]: 
aslice(-2) N [rb", "e"] 
aslice(-2.-0)  //["b"] 
上 面 代码 中 ，-2 表示 倒数 计算 的 第 二 个 位 置 ，-1 表示 倒数 计算 的 第 一 个 位 置 。 
【示例 2】 如 果 参 数值 大 于 数组 长 度 ， 或 者 第 二 个 参数 小 于 第 一 个 参数 ， 则 返回 空 数组 。 
| var a=[a', b, ‘cl]; 
| a.slice(4) wal 
| asliceC. 1) /0 
【示例 3】slice0 方 法 的 一 个 重要 应 用 ， 是 将 类 似 数 组 的 对 象 转 为 真正 的 数组 。 


Array.prototype.slice.call({ 0: 'a', 1: b', length: 2 })// [ab] 
Array.prototype.slice.call(document.querySelectorAll("div")): 


Array.prototype.slice.call(areuments); 
| 上 面 代码 的 参数 都 不 是 数组 ,但 是 通过 call0 方 法 ,在 它们 上 面 调 用 slice0 方 法 , 就 可 以 把 它们 转 
| 为 真正 的 数组 。 
| 2. splice() 
| 


| splice0 方 法 用 于 删除 原 数组 的 一 部 分 元 素 , 并 可 以 在 被 删除 的 位 置 添加 新 的 数组 元 素 , 返回 值 是 
| 被 删除 的 元 素 。 注 意 ， 该 方法 会 改变 原 数组 。 

| splice0 的 第 一 个 参数 是 删除 的 起 始 位 置 , 第 二 个 参数 是 被 删除 的 元 素 个 数 。 如果 后 面 还 有 更 多 的 
| 参数 ， 则 表示 这 些 就 是 要 被 插入 数组 的 新 元 素 。 例 如 : 


| var a = [a be sd ‘er ]: 

| a.splice(4. 2) / re" "f"] 

| a 1 [ra", “b", "cn "d"] 
| 


| 上 面 代码 从 原 数 组 4 号 位 置 ， 删 除了 两 个 数组 成 员 。 
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vara=[a.b cd ie, f]; | 
asplice(4. 2, 1, 2) Je | 
a 1/ [ra", bw er "d", 1 2] 
上 面 代码 除了 删除 成 员 ， 还 插入 了 两 个 新 成 员 。 
【示例 4】 起 始 位 置 如 果 是 负数 ， 就 表示 从 倒数 位 置 开始 删除 。 
Var a=['a, bc de 人; 
asplice(-4. 2) i a | 
上 面 代码 表示 ， 从 倒数 第 四 个 位 置 ec 开始 删除 两 个 成 员 。 
【示例 5】 如 果 只 是 单纯 地 插入 元 素 ，splice0 方 法 的 第 二 个 参数 可 以 设 为 0。 
vara=[1.1.1]: 
asplice(1. 0.2) UD 
a 本 和 部 
【示例 6】 如 果 只 提供 第 一 个 参数 ， 等 同 于 将 原 数组 在 指定 位 置 拆 分 成 两 个 数组 。 


var a=[1, 2, 3, 4]:; 
a.splice(2) / [3,4] 
a 1 [1,2] 


4.2.6 排序 数组 


1. reverse() | 
reverse( 方 法 用 于 颠倒 数组 中 元 素 的 顺序 ， 返 回 改变 后 的 数组 。 注 意 ， 该 方法 将 改变 原 数组 。 例 | 


var a=['a', bc]: 


areverse() | ha | | 
二 / "cn "b", "a"] | 

| 
2. sort() 
sort() 方 法 对 数组 成 员 进行 排序 ， 默 认 是 按照 字典 顺序 排序 。 排 序 后 ， 原 数组 将 被 改变 。 例 如 : | 
[dc. b', 'al].sortO / [abc,d] | 
[4. 3.2. 1].sortO 1/[1,2,3,4] | 
[11. 101].sortO /1/ [101.11] | 
[10111. 1101. 111].sortO // [10111, 1101. 111] | 


上 面 代码 的 最 后 两 个 例子 ， 需 要 特殊 注意 。sort0 方 法 不 是 按照 大 小 排序 ， 而 是 按照 对 应 字符 串 
的 字典 顺序 排序 。 也 就 是 说 ， 数 值 会 被 先 转 成 字符 串 ， 再 按照 字典 顺序 进行 比较 ， 所 以 101 排 在 11 的 
前 面 。 

【示例 1】 如 果 想 让 sort0 方 法 按照 自 定义 方式 排序 ， 可 以 传 入 一 个 函数 作为 参数 ， 表 示 按 照 自 
定义 方法 进行 排序 。 该 函数 本 身 又 接受 两 个 参数 ， 表 示 进 行 比较 的 两 个 元 素 。 如 果 返 回 值 大 于 0, 表 | 
示 第 一 个 元 素 排 在 第 二 个 元 素 后 面 :其 他 情况 下 ， 都 是 第 一 个 元 素 排 在 第 二 个 元 素 前 面 。 


[10111. 1101. 111].sort(fanction(a. b) { 
Tetum a—b: 
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DD [111., 1101. 10111] 
k 


| 
| {name: " 张 三 ". age: 30}, 
| 


pa {name: " 李 四 
全 站 | {name: " 王 五 ", age: 28} 
di J.sort(function(01., 02) { 
0 
| D 
| Wl 


1/ {name: " 李 四 ", age: 24}. 
1/ {name: " 王 五 ", age: 28}, 
1/ {name: " 张 三 ", age: 30} 


如 
【示例 2】 如 果 根 据 奇偶 数 顺序 排列 数组 ， 只 需要 判断 排序 函数 中 两 个 参数 是 否 为 奇偶 数 ， 并 决 
| 定 排列 顺序 。 
| function f (a, b) { / 排序 函数 
| Var a=a % 2; / 获取 参数 a 的 奇偶 性 
| varb=b9%62: / 获取 参数 b 的 奇偶 性 
| 让 (a 一 0) retum 1: / 如 果 参 数 a 为 偶数 ， 则 排 在 左边 
| f(b = 0) retum -1: / 如 果 参 数 b 为 偶数 ， 则 排 在 右边 
b 
| var a=[3, 1,2,4, 5, 7, 6, 8, 0, 9]; // 定义 数组 
| a.sort(D): / 根据 数字 大 小 由 大 到 小 进行 排序 
| alert(a): // 返回 数组 [3.1.5.7.9.0.8.6.4.2] 


| sort() 方 法 在 调用 排序 函数 时 ， 把 每 个 元 素 值 传递 给 排序 函数 ， 如 果 元 素 值 为 偶数 ， 则 保留 其 位 
| 置 不 动 ; 如 果 元 素 值 为 奇数 ， 则 调换 参数 a 和 的 显示 顺序 ， 从 而 实现 对 数组 中 所 有 元 素 执行 奇偶 排 
| 序 。 如 果 和 希望 偶数 排 在 前 面 ， 奇 数 排 在 后 面 ， 则 只 需 修改 排序 函数 返回 值 。 
| function f(a, b) { 


| 【示例 3】 对 字符 串 进行 排序 是 区 分 大 小 写 的 ， 这 是 因为 每 个 大 写 和 小 写字 母 在 字符 编码 表 中 的 
| 顺序 是 不 同 的 ， 大 写字 母 大 于 小 写字 母 。 


| 
vara=["aB"."Ab", "Ba", "DA /定义 数组 
| a.sortO: // 默认 方法 排序 
alert(a): // 返回 数组 ["Ab"."Ba"."aB"."bA"] 
| 如 果 不 希 望 区 分 字母 大 小 ， 大 写字 母 和 小 写字 母 按 相同 顺序 排列 ， 设 计 代码 如 下 。 
| function fla, b) { // 排序 函数 
| Var a = a.toLowerCase: // 转换 为 小 写 形式 
| varb=btoLowerCase: / 转换 为 小 写 形式 
| if(a<b) { / 如果 a 的 编码 小 于 b， 则 换 位 操作 
| Tetum 1: 
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} | 
alse{ // 否则 ， 保 持原 位 不 动 | 
Tetum -1; | 

} | 

} 

vara= ["aB" "Ab" "Ba", "bA"]: 1/ 定义 数组 

asort(): / 执行 排序 

alert(a): // 返回 数组 ["aB" "Ab", "Ba". "bA"] 


如 果 调 整 排序 顺序 ， 可 以 为 设置 返回 值 取 反 即 可 。 

【示例 4】 把 浮 点 数 和 整数 分 开 排列 经 常会 遇 到 。 如 果 借 助 sort0 方 法 ， 设 计 起 来 并 不 是 很 难 : | 

function f (a, b) { // 排序 函数 | 
f(a > Math.floor(a)) remum 1: // 如 果 a 是 浮 点 数 ， 则 调换 位 置 | 
f(b > Math floortb)) retum 一 1: / 如 果 b 是 浮 点 数 ， 则 调换 位 置 


} 
var a= [3.55555, 1.23456, 3, 2.11111. 5. 7, 3]: // 定义 数组 


a.sort(D); // 进行 第 选 

alert(a): // 返回 数组 [3,5,7,3,2.11111,1.23456,3.55555] 
4.2.7 ”定位 元 素 

1. indexOf() 


indexOf0 方 法 返回 给 定 元 素 在 数组 中 第 一 次 出 现 的 位 置 ， 如 果 没 有 出 现 则 返回 -1。 例 如 : 

var a=['a', bc]; 

a.indexOf('b’) // 1 

aindexOf('y'") // -1 

indexOfO 方 法 还 可 以 接受 第 二 个 参数 ， 表 示 搜 索 的 开始 位 置 。 

['a', b', ic]indexofra'. 1) // -1 

上 面 代码 从 1 号 位 置 开始 搜索 字符 a， 结 果 为 -1， 表 示 没 有 搜索 到 。 

2. lastIndexOf() 

lastIndexOf0 方 法 返回 给 定 元 素 在 数组 中 最 后 一 次 出 现 的 位 置 ， 如 果 没 有 出 现 则 返回 -1。 例 如 : 


var a= [2, 5. 9. 2]; 
a.lastIndexOf(2) //3 
a.lastIndexOf(7) // -1 


< 注意 : 如 果 数 组 中 包含 NaN， 这 两 种 方法 不 适用 ， 即 无 法 确定 数组 成 员 是 否 包含 NaN。 
[NaN].indexOfNaN) // -1 
[NaN] .lastIndexOf(NaN) // -1 


这 是 因为 这 两 种 方法 内 部 ， 使 用 严格 相等 运算 符 (二 =) 进行 比较 ， 而 NaN 是 唯一 一 个 不 等 于 自 
身 的 值 。 
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4.2.8 ”迭代 数组 
1. map() 


map0 方 法 对 数组 的 所 有 元 素 依次 调用 一 个 函数 ， 根 据 函 数 结果 返回 一 个 新 数组 。 例 如 : 
var numbers = [1, 2, 3]; 
| numbers.map(function(n) { 
| retum n+1; 
| D; / [2, 3,4] 
numbers 1 [1,2,3] 
| 在 上 面 代码 中 ，numbers 数组 的 所 有 元 素 都 加 1， 组 成 一 个 新 数组 返回 ， 原 数组 没有 变化 。 
| 【示例 1】map0 方 法 接受 一 个 函数 作为 参数 。 该 函数 调用 时 ，map0 方 法 会 将 其 传 入 3 个 参数 ， 
分 别 是 当前 元 素 、 当 前 位 置 和 数组 本 身 。 
[1, 2. 3].map(function(elem, index, arr) { 
return elem * index: 
»; / [0, 2, 6] 
| 在 上 面 代码 中 ，map0 方 法 的 回调 函数 的 3 个 参数 中 ，elem 为 当前 元 素 的 值 ，index 为 当前 元 素 的 
| 位 置 ，arr 为 原 数组 〈[1, 2, 3])。 
| 【示例 2】map0 方 法 不 仅 可 以 用 于 数组 ， 还 可 以 用 于 字符 串 ， 用 来 遍历 字符 串 的 每 个 字符 。 但 
| 是 ， 不 能 直接 使 用 ， 而 要 通过 函数 的 call0 方 法 间接 使 用 ， 或 者 先 将 字符 串 转 为 数组 ， 然 后 使 用 。 
| 
| var upper = function(x) { 
Tetum x.toUpperCaseO:; 


| 上 
Dimapcallabe uppe) /TA','B,'C] 
| / 或 者 
"abe'.split(").map(upper) UI[A', 'B','C'] 
| 其 他 类 似 数组 的 对 象 ， 如 document.querySelectorAll 方法 返回 DOM 节点 集合 ， 也 可 以 用 上 面 的 
| 方法 遍历 。 
| 【示例 3】map0 方 法 还 可 以 接受 第 二 个 参数 ， 表 示 回 调 函 数 执行 时 this 所 指向 的 对 象 。 
| var arr = ['a', b', 'c]: 
[1. 2].map(function(e) { 
| retum this[e]: 
| }am) /Ib,'e] 
| 在 上 面 代码 中 通过 map0 方 法 的 第 二 个 参数 ， 将 回调 函数 内 部 的 this 对 象 ， 指 向 arr 数组 。 
【示例 4】 如 果 数 组 有 空位 ，map0 方 法 的 回调 函数 在 这 个 位 置 不 会 执行 ， 会 跳 过 数组 的 空位 。 
var f= function(n) {retum n+ 1}: 
[1. undefined. 2].map(f) // [2. NaN. 3] 
[1.null 2].map(D // [2. 1. 3] 
[1. ,2].map(D // [2. ,3] 
在 上 面 代 码 中 ，map0 方 法 不 会 跳 过 undefined 和 null， 但 是 会 跳 过 空位 。 
| 下 面 示例 会 更 清楚 地 说 明 这 一 点 。 


“2 


Array(2).map(functionO { 
console.log('enter..."): 
Tetum 1: 

D hl 


在 上 面 代码 中 ，map0 方 法 根本 没有 执行 ， 直 接 返 回 Array(2) 生 成 的 空 数组 。 

2. forEach() 

forEach0 方 法 与 map0 方 法 很 相似 ， 也 是 遍历 数组 的 所 有 成 员 ， 执 行 某 种 操作 ， 但 是 forEach() 方 
法 一 般 不 返回 值 ， 只 用 来 操作 数据 。 如 果 需 要 有 返回 值 ， 一 般 使 用 map0 方 法 。 

forEach( 方 法 的 参数 与 map0 方 法 一 致 ， 也 是 一 个 函数 ， 数 组 的 所 有 元 素 会 依次 执行 该 函数 。 它 
接受 3 个 参数 ， 分 别 是 当前 位 置 的 值 、 当 前 位 置 的 编号 和 整个 数组 。 例 如 : 


function log(element index, array) { 
console.log('[' + index + '] =" + element): 


; 
[2, 5, 9].forEach(log): 
/1 [0]=2 
1 [1]=5 
1 [2]=9 
在 上 面 代码 中 ，forEach0 遍 历数 组 不 是 为 了 得 到 返回 值 ， 而 是 为 了 在 屏幕 输出 内 容 ， 所 以 应 该 使 
用 forEach0 方 法 ， 而 不 是 map0 方 法 ， 虽 然后 者 也 可 以 实现 同样 目的 。 
【示例 5】forEach0 方 法 也 可 以 接受 第 二 个 参数 ， 用 来 绑 定 回调 函数 的 this 关键 字 。 
var out = []; 
[1. 2. 3].forEach(function(elem) { 
this.push(elem * elem): 
}, ouD); 
out /01.4.9] 


在 上 面 代码 中 ， 空 数组 out 是 forEach0 方 法 的 第 二 个 参数 ， 结 果 ， 回 调 函数 内 部 的 this 关键 字 就 | 


指向 out。 这 个 参数 对 于 多 层 this 非常 有 用 ， 因 为 多 层 this 通常 指向 是 不 一 致 的 。 
Varobj={ 
name: ' 张 三 '、 
times: [1, 2, 3] , 
Print: fonctionO { 
this.times.forEach(function(n) { 
console.log(this.name): 
DD: 
} 
} 
objprintO / 没有 任何 输出 
在 上 面 代码 中 ，obj.print0 方 法 有 两 层 this， 它 们 的 指向 不 一 致 。 外 层 的 this.times 指向 obj 对 象 ， 
内 层 的 this.name 指向 顶层 对 象 window。 这 显然 是 违背 原意 的 , 解决 方法 就 是 使 用 forEach0 方 法 的 第 
二 个 参数 固定 this。 
Var obj={ 
name: ' 张 三 … 


A 
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在 上 面 代码 中 ， 执 行 到 数组 的 第 二 个 成 员 时 ， 就 会 中 断 执行 。forEach( 方 法 做 不 到 这 一 点 。 
【示例 6】forEach0 方 法 会 跳 过 数组 的 空位 。 


在 上 面 代码 中 ，forEach() 方 法 会 跳 过 空位 ， 但 不 会 跳 过 undefined 和 null 值 。 
【示例 7】forEach0 方 法 也 可 以 用 于 类 似 数组 的 对 象 和 字符 串 。 


上 面 代码 中 ，obj 是 一 个 类 似 数组 的 对 象 ，forEach0 方 法 可 以 遍历 它 的 数字 键 。forEach0 方 法 也 
可 以 遍历 字符 串 。 
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【拓展 】 

在 ECMAScript 5 之 前 ， 要 和 迭 代数 组 ， 一 般 需 要 使 用 循环 语句 实现 ， 也 可 以 自 
定义 一 个 先 代 器 ， 通 过 自 定义 迭代 器 能 够 欠 炼 JavaScript 编码 能 力 。 这 里 为 读者 提 
供 一 个 数组 迭代 器 的 实现 过 程 ， 感 兴趣 的 读者 可 以 扫 码 参考 。 训 


4.2.9 过 滤 数组 
使 用 filter0 方 法 可 以 过 滤 数 组 。filter0 方 法 的 参数 是 一 个 函数 ， 所 有 数组 成 员 依次 执行 该 函数 ， 
返回 结果 为 true 的 成 员 组 成 一 个 新 数组 返回 。 该 方法 不 会 改变 原 数 组 。 例 如 : 


[1,2, 3, 4, 5].filter(function(elem) { 
Tetum (elem > 3); | 视频 讲 


在 上 面 代码 中 将 大 于 3 的 原 数组 成 员 ， 作 为 一 个 新 数组 返回 。 
【示例 1】 再 看 一 个 例子 。 
Var arr = [0. 1, 'a', false]: 
arr.filter(Boolean)// [1, "a"] 
在 上 面 例子 中 ， 通 过 filter0 方 法 ， 返 回 数组 arr 中 所 有 布尔 值 为 tue 的 成 员 。 
【示例 2】filter0 方 法 的 参数 函数 可 以 接受 3 个 参数 ， 第 一 个 参数 是 当前 数组 元 素 的 值 ， 这 是 必 
需 的 ， 后 两 个 参数 是 可 选 的 ， 分 别 是 当前 数组 元 素 的 位 置 和 整个 数组 。 


[1, 2., 3, 4. 5].filter(function(elem., index. arr) { 
Tetum index % 2 — 0; 


D: 
1/[1, 3, 5] 
上 面 代码 返回 偶数 位 置 的 元 素 组 成 的 新 数组 。 
【示例 3】filter( 方 法 还 可 以 接受 第 二 个 参数 ， 指 定 测试 函数 所 在 的 上 下 文 对 象 〈 即 this 对 象 )。 


var Obj = fnnction0 { 
this.MAX =3; 


上 
var myFilter = function(item) { 
if (item> this.MAX) { 
Tetum true: 
} 


号 
var arr = [2, 8, 3, 4. 1, 3, 2, 9]; 
arrfiltertmyFilter new ObjO) 
/ [8.4.9] ! 
在 上 面 代码 中 ， 测 试 函数 myFilter 内 部 有 this 对 象 ， 它 可 以 被 fiter0 方 法 的 第 二 个 参数 绑 定 。 上 | 
例 中 ，myFilter 的 this 绑 定 了 Obj 对 象 的 实例 ， 返 回 大 于 3 的 元 素 。 


4.2.10 ”验证 数组 总 
| 
some0 和 every0 方 法 用 来 判断 数组 元 素 是 否 符合 某 种 条 件 。 它 们 接受 一 个 函数 作为 参数 ， 所 有 数 | 名 加 六 
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| 组 元 素 依次 执行 该 函数 ， 返 回 一 个 布尔 值 。 该 函数 接受 3 个 参数 ， 依 次 是 当前 位 置 的 元 素 、 当 前 位 置 
| 的 序号 和 整个 数组 。 
& 1. some() 
食 生 | some0 方 法 是 只 要 有 一 个 数组 元 素 的 返回 值 是 tue， 则 整个 some() 方 法 的 返回 值 就 是 tue， 否 则 


为 false。 : 
No 


| var arr =[1, 2, 3, 4, 5]; 

| alr.some(function(elem, index. arr) { 
Tetum elem >= 3; 

D: // 返回 tme 


上 面 代码 表示 ， 如 果 存 在 大 于 等 于 3 的 数组 元 素 ， 就 返回 tme。 

2. every() 

every0 方 法 则 是 所 有 数组 元 素 的 返回 值 都 是 tue， 才 返回 tue， 否 则 返回 false。 例 如 : 
| var arr =[1, 2, 3, 4, 5]: 

| arr.every(finction(elem, index, arr) { 

| Tetum elem >= 3; 

D; // 返回 false 

上 面 代 码 表 示 ， 只 有 所 有 数组 元 素 大 于 等 于 3， 才 返回 true。 


| 
”4 提 注意 : 对 于 空 歼 组 ，some0 方 法 返回 甸 lse，every0) 方 法 返回 tue， 回 调 函数 都 不 会 执行 。 
| 


function isEven(x) {retum x % 2 一 0} 
| [0.someGisEven) // 返回 false 
| [DLevery(isEven) // 返回 te 


some0 和 every0 方 法 还 可 以 接受 第 二 个 参数 ， 用 来 绑 定 函数 中 的 this 关键 字 。 
4.2.11 汇总 数组 


Teduce0 和 reduceRight0 方 法 能 够 依次 处 理 数 组 的 每 个 成 员 ， 最 终 累计 为 一 个 值 。 
| 它们 的 差别 是 ，reduceO 是 从 左 到 右 处 理 〈 从 第 一 个 成 员 到 最 后 一 个 成 员 )，reduceRightO 则 是 从 
| 右 到 左 〈 从 最 后 一 个 成 员 到 第 一 个 成 员 )， 其 他 完全 一 样 。 
| 这 两 个 方法 的 第 一 个 参数 都 是 一 个 函数 。 该 函数 接受 以 下 4 个 参数 。 
| (1) 累积 变量 ， 默 认为 数组 的 第 一 个 成 员 。 
| (2) 当前 变量 ， 默 认为 数组 的 第 二 个 成 。 
(3) 当前 位 置 ( 从 0 开始 )。 

(4) 原 数 组 。 
这 4 个 参数 之 中 ， 只 有 前 两 个 是 必需 的 ， 后 两 个 则 是 可 选 的 。 
【示例 1】 下 面 示例 求 数组 成 员 之 和 。 
[1,2. 3.4. 5]reduce(function(x. y) { 

console.log(x. y) 

Tetum x+y: 


“ee 


/33 
/64 
/105 
/ 最 后 结果 : 15 


在 上 面 代码 中 ， 第 一 轮 执行 ，x 是 数组 的 第 一 个 成 员 ，y 是 数组 的 第 二 个 成 员 。 从 第 二 轮 开始 ,x | 


为 上 一 轮 的 返回 值 ，y 为 当前 数组 成 员 ， 直 到 遍历 完 所 有 成 员 ， 返 回 最 后 一 轮 计算 后 的 x。 
【示例 2】 利 用 reduce0 方 法 ， 可 以 写 一 个 数组 求 和 的 sum0 方 法 。 
Arrayprototype.sum = function() { 


Tetum this.reduce(function(partial, value) { 
Tetum partial + Value: 


六 


} 
[3, 4. 5, 6, 10].sum0 /28 


【示例 3】 如 果 要 对 累积 变量 指定 初 值 ， 可 以 把 它 放 在 reduce0 和 reduceRight0 方 法 的 第 二 个 
参数 。 
[1,2, 3, 4. 5].reduce(function(x, y) { 
retum x+y: 
}, 10): /125 


在 上 面 代码 中 ， 指 定 参数 x 的 初 值 为 10， 所 以 数组 从 10 开始 累加 ， 最 终结 果 为 25。 注 意 ， 这 时 
y 是 从 数组 的 第 一 个 成 员 开 始 遍 历 。 
第 二 个 参数 相当 于 设 定 了 默认 值 ， 处 理 空 数组 时 尤其 有 用 。 
function add(prev, cur) { 
Tetum prev + cur; 
[J.reduce(add) /TypeError: Reduce of empty array with no initial value 
[reduce(add, 1) U1 
在 上 面 代码 中 ， 由 于 空 数组 取 不 到 初始 值 ，reduce0 方 法 会 报错 。 这 时 ， 加 上 第 二 个 参数 ， 就 能 
保证 总 是 会 返回 一 个 值 。 
【示例 4】 下 面 是 一 个 reduceRight0 方 法 的 例子 。 
fnction substract(prev, cur) { 
Tetum prev ~ cu 
} 
[3. 2. 1].reduce(substract) 110 
[3. 2. 1] reduceRight(substracb ~ //-4 
在 上 面 代码 中 , reduce0 方 法 相当 于 3 减 去 2 再 减 去 1, reduceRight0 方 法 相当 于 1 减 去 2 再 减 去 3。 
【示例 5】 由 于 reduce0 方 法 依次 处 理 每 个 元 素 ， 所 以 实际 上 还 可 以 用 它 来 搜索 某 个 元 素 。 下 面 
代码 是 找 出 长 度 最 长 的 数组 元 素 。 
fonction findLongest(entries) { 
Tetum entries.reduce(function(longest. entry) { 
Tetum entry.length > longest.length ? entry: longest: 
下 
} 
findLongest(['aaa'. 'bb'. 'c'"]) // "aaa" 
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| 【拓展 】 
| ECMAScript 5 为 Array 新 增 的 9 个 原型 方法 中 ， 有 不 少 返 回 的 还 是 数组 ， 如 mapO、forEach()、 
| fiter0 等 ， 所 以 可 以 链 式 使 用 。 


| var users=[ 
| {name: tom' email: tom@example.com'}, 
{name: peter, email: 'peter@example.com'} 

| 下 
| Users 

.map(function(user) { 

return user.email: 
ee 
| ‘filter(function(email) { 
Teturn /^t/.test(email): 

了 
| forEach(alert): 弹出 tom@example.com 
| 在 上 面 代码 中 ， 先 产生 一 个 所 有 Email 地 址 组 成 的 数组 ， 然 后 再 过 滤 出 以 + 开头 的 Email 地 址 。 
| 

43 案例 实战 
本 节 通 过 多 个 示例 练习 数组 的 应 用 。 
4.3.1 交换 变量 值 

| 设计 交换 两 个 变量 的 值 ， 简 单 的 方法 如 下 。 
vara= 10,b=20; / 变量 初始 化 
| vartemp =a; // 定义 临时 变量 存储 a 
| a=b: /1/ 把 b 的 值 赋值 给 a 
| b=temp: / 把 临时 变量 的 值 赋值 给 b 
| 
| 利用 数组 可 以 更 灵巧 ， 方 法 如 下 。 

a=[b.b=a ][o]: / 通过 数组 快速 交换 数据 


上 面 代码 定义 一 个 匿名 数组 ， 把 变量 b 的 值 传递 给 第 一 个 元 素 , 然后 在 第 二 个 元 素 中 以 赋值 表达 
| 式 运算 的 方式 把 变量 a 的 值 传递 给 变量 b， 同 时 通过 数组 下 标 方式 获取 第 一 个 元 素 的 值 并 赋值 给 变量 
| a。 这样 变 量 a 和 b 就 在 一 个 数组 表达 式 中 被 快速 置换 。 


4.3.2 ”使 用 关联 数组 


| 
| 关联 数组 是 一 种 具有 特殊 索引 方式 的 数组 , 它 的 键 名 可 以 使 用 字符 串 或 者 其 他 类 型 的 值 ( 除 null)， 
| | 或 者 是 表达 式 ， 因 此 与 键 名 关联 的 值 没 有 固定 的 顺序 。 

| 在 JavaScript 中 ， 对 象 本 质 就 是 一 个 关联 数组 ， 数 组 是 对 象 的 子 类 型 。 

| 【示例 1】 为 数组 下 标 指定 负 值 。 


Ss 


第 后 章 使 用 数组 一 本 | 


远 二 下 // 定义 空 数组 | 

a-1]=1: / 下 标 为 -1 的 元 素 赋值 | 
| 

length 属性 值 为 0， 说明 数组 没有 元 素 。 可 以 使 用 下 面 方 法 读 取 键 名 对 应 的 值 。 | 

alert(a.length); // 返回 值 为 0， 说 明 数 组 长 度 没有 增加 

alert(a[-1]): / 返回 1， 说 明 这 个 元 素 还 是 存在 的 

alert(a["-1"]): // 返回 1， 说 明 这 个 值 以 对 象 属性 的 形式 被 存储 

还 可 以 为 数组 指定 字符 串 下 标 ， 或 者 布尔 值 下 标 。 

vara=[]: 

a[tme] = 1 | 

alfalse] = 0: | 

alert(alengtb): // 返回 值 为 0， 说 明 数 组 长 度 没有 增加 | 

alert(a[true]): // 返回 值 为 1 

alert(a[false]): // 返回 值 为 0 

alert(a[0]): // 返回 undefined | 

alert(a[1]): // 返回 undefined | 
| 


虽然 tue 和 false 可 以 被 转换 为 1 和 0， 但 是 JavaScript 并 没有 执行 转换 ， 而 是 把 它们 视 为 对 象 属 | 
性 来 看 待 。 如 果 文 本 是 数字 ， 可 以 直接 使 用 数字 下 标 来 访问 ， 这 时 JavaScript 就 能 够 自动 转换 它们 的 | 
类 型 。 
a["1"] = 1; 
alert(a[1]): // 返回 值 为 1 
【示例 2】 通 过 关联 数组 ， 数 据 检索 速度 要 优 于 数组 迭代 检索 。 
Var a=[[" 张 三 ",1],[" 李 四 ",2],[" 王 五 ",3]]; 。 // 二 维 数组 
ee // 遍历 二 维 数组 
让 (afil[0] 一 " 李 四 " alert(a[il[1]): // 检索 指定 元 素 


} 
使 用 关联 数组 访问 : 
vara=[]: // 定义 空 数组 
a[" 张 三 "] = 1; / 以 文本 下 标 来 存储 元 素 的 值 
a[" 李 四 "] =2; 
3 和 王 五 人] 三 3; 
alert(a[" 李 四 "]): / 快速 定位 检索 
【示例 3】 可 以 使 用 表达 式 设 计 下 标 。 


length 属性 值 为 2， 说 明 数 组 包含 两 个 元 素 。 


alert(a.length): // 返回 2， 说 明 仅 有 两 个 元 素 有 效 
alert(a[0]): / 返回 3 
alert(a[1]): / 返回 3 
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逗号 表达 式 的 返回 值 是 最 后 一 个 值 。 前 面 两 行 代 码 赋值 就 被 后 面 两 行 代 码 赋值 覆盖 。 
| 【示例 4】 对 于 关联 数组 ，JavaScript 会 试图 把 关联 的 键 名 表达 式 转换 为 数值 ， 如 果 转 换 成 功 ， 
| 则 视 为 数组 元 素 ， 如 果 转 换 失 败 ， 则 把 它 转换 为 字符 串 ， 作 为 键 名 形式 进行 操作 。 


| ee 7 数组 直接 量 
We var b =function() { // 函数 直接 量 
am 
| am=1: // 把 对 象 作为 数组 下 标 
| alert(a.length): // 返回 长 度 为 0 
alert(a[b]): 1/ 返回 1 
4.3.3 扩展 数组 
扩展 数组 一 般 通 过 为 Array 对 象 定义 原型 方法 来 实现 ， 这 些 原型 方法 能 被 所 有 数组 继承 。 
| Arrayprototype .hello = functionO { // 定义 Array 对 象 的 原型 方法 
| alert("Hello.world"): 
| 
} 
| 


| 其 中 Array 是 数组 构造 函数 ，prototype 是 构造 函数 的 属性 ， 由 于 该 属性 指向 一 个 原型 对 象 ， 然 后 
| 通过 点 运算 符 为 其 定义 属性 或 方法 ， 这 些 属性 和 方法 将 被 构造 函数 的 所 有 实例 对 象 继承 。 

上 面 3 行 代码 为 数组 对 象 定义 了 一 个 原型 方法 hello0， 这 样 就 可 以 在 任意 数组 中 调用 该 方法 。 
vara=[1.2.3]; // 定义 数组 直接 量 

ahello0: // 调用 数组 的 原型 方法 ， 提 示 "Hello,world" 

下 面 设计 一 种 安全 的 、 可 兼容 的 数组 扩展 方法 模式 。 


| 
| Amayprototype. m=Array.prototype.m | 
| (Array.prototype.m = function() { 

/ 扩展 方法 的 具体 代码 


人 = Array.prototype. m 
上 面 代码 是 数组 扩展 方法 的 通用 模式 。 
首先 ， 判 断 数组 中 是 否 存在 名 称 为 m 的 原型 方法 ， 如 果 存 在 则 直接 引用 该 原型 方法 即 可 ， 不 再 
| 定义， 否则 定义 原型 方法 m0。 

然后 ， 把 定义 的 原型 方法 mO 引 用 给 原型 方法 m0， 这 样 做 的 目的 是 ， 防 止 当 原型 方法 m0 引用 
给 Object 对 象 的 原型 时 发 生死 循环 调用 ， 可 以 兼容 Firefox 浏览 器 。 

最 后 , 把 数组 的 临时 原型 方法 m0O 引 用 给 Object 对 象 的 原型 , 这 样 能 够 确保 所 有 对 象 都 可 以 调用 
| 这 个 扩展 方法 。 经 过 临时 原型 方法 mO 的 中 转 ， 就 可 以 防止 数组 (Array) 和 对 象 (Object) 都 定义 了 
| 同名 方法 ， 如 果 把 该 方法 传递 给 Object， 而 Object 的 原型 方法 又 引用 了 Array 的 同名 原型 方法 ， 就 会 
| 发 生 循环 引用 现象 。 
| 【示例 】 为 数组 扩展 一 个 求 所 有 元 素 和 的 方法 ， 实 现代 码 如 下 。 
| Arrayprototype. sum = Array.prototype.sum ”| ”// 检测 是 否 存在 同名 方法 


| (CAmayprototypesum= function0 { // 定义 该 方法 
| Var_n=0: / 临时 汇总 变量 


| for (var iin this) { // 遍历 当前 数组 对 象 


“a0 


f(this[i] = parseFloat(this[)) n+= this[]: 
// 如 果 数 组 元 素 是 数字 ， 则 进行 累加 


下 
retum_n; ”// 返回 累加 的 和 
Dy; 
Object.prototype.sum = Array.prototype._sum 
// 把 数组 临时 原型 方法 _sum0 赋 值 给 对 象 的 原型 方法 sam0 
该 原型 方法 sum0 能 够 计算 当前 数组 中 元 素 为 数字 的 和 。 在 该 方法 的 循环 结构 体 中 ， 首 先 试图 把 
每 个 元 素 转换 为 浮 点 数 , 如 果 转 换 成 功 , 则 把 它们 相 加 , 转换 失败 将 会 返回 NaN, 会 忽略 该 元 素 的 值 。 
下 面 调用 该 方法 。 
vara=[1,2, 3, 4, 5, 6, 7, 8, "9"]: // 定义 数组 直接 量 
alert(a.sum()): // 返回 45 


其 中 第 9 个 元 素 是 一 个 字符 串 类 型 的 数字 ， 汇 总 时 也 被 转换 为 数值 进行 相 加 。 
4.3.4 初始 化 数组 
JavaScript 数组 在 默认 状态 下 不 会 初始 化 。 如 果 使 用 [运算 符 创 建 一 个 新 数组 ,那么 此 数组 将 是 空 


的 。 如 果 访问 的 是 数组 中 不 存在 的 元 素 ， 返 回 值 是 undefined。 因 此 ， 在 JavaSeript 程序 设计 中 应 该 时 | 


刻 考虑 这 个 问题 : 在 尝试 读 取 每 个 元 素 之 前 ， 都 应 该 预先 设置 它 的 值 。 但 是 ， 如 果 在 设计 中 假设 每 个 
元 素 都 从 一 个 已 知 的 值 开始 〈 如 0)， 那 么 就 必须 预定 义 这 个 数组 。 也 可 以 为 JavaScript 自 定义 一 个 静 
态 函数 如 下 。 
Array.dim = function(dimension, initial) { 
var a=[],i; 
for (i=0:i< dimension:; i+= 1) { 
ali] = initial: 
b 
Tetum a:; 
要 
借助 这 个 工具 函数 ， 可 以 很 轻松 地 创建 一 个 初始 化 数组 。 例 如 ， 创 建 一 个 包含 100 个 0 的 数组 
如 下 。 
Var myArray = Array.dim(100. 0): 
JavaScript 没有 多 维 数组 ， 但 是 它 支持 元 素 为 数组 的 数组 。 
var matrix =[ 
[0. 1.2]. 
[3. 4. 5]. 
[6.7.8] 


上 
matrix[2][1] /7 
为 了 自动 化 创建 一 个 二 维 数组 或 一 个 元 素 为 数组 的 数组 ， 不 妨 如 下 所 示 做 。 
for(i=0:i<n:i+t=1){ 
my_aray[i] =[]: 
} 


"es 
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| eR 
4W 注意 : Aray.dim(, 四 在 这 里 不 能 工作 ， 如 果 使 用 它 ， 每 个 元 素 都 指向 同一 个 数组 的 引用 ， 那 是 
| 非常 糟糕 的 。 
| 
合 内 一 个 空 拒 降 的 每 个 单元 将 拥有 一 个 初 给 值 undefined。 如 果 项 望 它们 有 不 同 的 初始 值 ， 必 须 明确 
一 地 设置 它们 的 值 。 因 此 ， 可 以 单独 为 Amray 定义 一 个 矩阵 数组 定义 函数 。 
Note | Arraymatrix = function(m., n, initial) { 


| var ai ji mat= []: 
| 


for(i=0;i<mi+=1){ 


D> 
下 面 就 利用 这 个 矩阵 数组 定义 函数 构建 一 个 5*5 的 矩阵 数组 ， 且 每 个 元 素 的 初始 值 为 0。 


var myMatrix = Array.matrix(5, S. 0): 
document.writeln(myMatrix[2][4]): // 0 


4.3.5 数组 去 重 


为 数组 去 除 重复 项 是 开发 中 经 常 遇 到 的 问题 ， 解 决 方法 也 有 多 种 ， 本 节 介绍 几 种 常用 方法 。 
【示例 1】 第 一 种 方法 最 简单 ， 使 用 for 语句 遍历 数组 ， 逐 一 检测 每 个 元 素 是 否 重复 存在 。 


| 
| Array.prototype.unique = function|O { 
| varn=[]:/ 新 建 临时 数组 
for(vari=0:i<thislength: i++) { / 遍历 当前 数组 
| // 如 果 当 前 数组 的 第 i 项 已 经 保存 进 了 临时 数组 ， 那 么 跳 过 ， 
| // 否则 把 当前 项 push 到 临时 数组 中 
if (nindexOf(this[i]) 一 -1) n:push(this[i]): 
} 
| Tetum n; 
} 
或 者 通过 验证 每 个 元 素 第 一 次 出 现 位 置 是 否 相同 来 过 滤 元 素 ， 代 码 如 下 。 

Arayprototype .unique3 = fonctionO { 

varn= [this[0]]: // 结果 数组 

for (vari= 1;i< this.length: it+) {// 从 第 二 项 开始 遍历 

/ 如 果 当 前 数组 的 第 i 项 在 当前 数组 中 第 一 次 出 现 的 位 置 不 是 i， 

| // 那么 表示 第 i 项 是 重复 的 ， 忽 略 掉 。 否 则 存 入 结果 数组 
| if (this.indexORthis[i]) =—= i) n.push(this[i]): 

} 
| Tetum n: 


| 【示例 2】 第 二 种 方法 借助 哈 希 表 (hash table) 来 快速 过 滤 。 在 遍历 原始 数组 时 ， 使 用 一 个 对 象 


pr 
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n 的 属性 来 保存 原始 数组 中 元 素 的 值 ， 以 降低 indexOf0 方 法 遍历 时 间 。 


Array.prototype-unique = functionO { 
varn= 人 .rz=[]: /an 为 hash 表 ，r 为 临时 数组 
forGvari=0:i<thislength: it+) {// 遍历 当前 数组 
让 (mn[this[]) {// 如 果 hash 表 中 没有 当前 项 
n[this[ 训 = tmue: // 存 入 hash 表 
Tpush(this[i): // 把 当前 数组 的 当前 项 push 到 临时 数组 中 
b 


BB 
Tetum r: 
} 


上 面 方法 会 误解 相同 的 字符 串 型 和 数值 型 元 素 值 ， 如 1 与 "1" 被 视 为 重复 项 。 因此， 下 面 对 上 面 
方法 进行 改进 ， 增 加 类 型 的 检测 。 
/ 类 hash 方法 的 改进 版 | 
Array.prototype.unique = functionO { | 
varn= 0.1=[]: | 
for (vari= 0:i<thislength: i++) { 
if (tn[typeof (this[i]) + this[i]]) { 
ntypeof (this[i]) + this[]] = tme: 
rpush(this[i]) 
} 


3 
retumr 


a m= 222" 2222 工 让 
varnewamy=amrunique0: 
console.log(newarry[newarry.length - 1]): /3 
示例 1 中 两 种 方法 都 用 到 数组 的 indexOf0 方 法 。 此 方法 的 目的 是 寻找 存 入 元 素 在 数组 中 第 一 次 
出 现 的 位 置 。 很 显然 ，JavaScript 引擎 在 实现 这 个 方法 时 会 遍历 数组 直到 找到 目标 为 止 。 这 样 会 浪费 
掉 很 多 时 间 。 而 示例 2 的 两 个 方法 用 的 是 hash 表 .。 把 已 经 出 现 过 的 通过 下 标的 形式 存 入 一 个 对 象 内 ， 
下 标的 引用 要 比 用 indexOf0 搜 索 数 组 快 得 多 。 
测试 结果 表明 示例 2 的 方法 远 远 快 于 示例 1 的 两 种 方法 ， 但 是 内 存 占用 比较 多 ， 因 为 多 了 一 个 | 
hash 表 ， 这 就 是 所 谓 的 空间 换 时 间 。 
【示例 3】 本 方法 的 设计 思路 : 先 使 用 JavaScript 原生 的 sort0 方 法 把 数组 排序 ， 然 后 比较 相 邻 的 
两 个 值 ， 去 除 重复 项 。 最 终 测 试 结果 显示 该 方法 运行 时 间 比 前 面 方法 都 要 快 。 
Array.prototype.unique = function| { 
this.sortO: 
var re = [this[0]]: 
for (vari= 1:;i< this.length: i++) { 
if (this[i] =— relre.length— 1]) { 
re.push(this[i]): 


"ds 
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44 强化 练习 


入 
| 算法 设计 是 JavaScript 编程 的 基本 功 ， 也 是 培养 敏捷 思维 能 力 很 好 的 手段 。 本 节 以 数组 排序 为 例 
区 2 简单 介绍 常用 排序 算法 ， 帮 助 读 者 们 强化 JavaScript 语言 的 思维 训练 ， 巩 固 JavaScript 基础 。 


4.4.1 插入 排序 


插入 排序 (Insertion-Sort) 的 算法 是 一 种 简单 直观 的 排序 算法 。 详 细 说 明 与 实现 代 
码 请 扫 码 阅读 。 


上 阅读 


序 算法 。 其 与 直接 插入 排序 算法 最 大 的 区 别 在 于 查找 插入 位 置 时 使 用 的 是 二 分 查找 的 
六 上 上 而 杰 方式 ， 在 速度 上 有 一 定 提升 。 详 细 说 明 与 实现 代码 请 扫 码 阅读 。 


| 44.3 选择 排序 
回 幅 站 和 辐 


线 
| 4.4.2 ”二 分 插入 排序 
| 
Fe 二 分 插入 〈Binary-insert-sort) 排序 是 一 种 在 直接 插入 排序 算法 上 进行 小 改动 的 排 
本 


选择 排序 (Selection-sort) 是 一 种 简单 直观 的 排序 算法 。 详 细 说 明 与 实现 代码 请 扫 
码 阅读 。 


| 4.4.4” 冒 泡 排序 


冒 泡 排序 是 一 种 简单 的 排序 算法 。 它 重复 地 走访 过 要 排序 的 数列 ， 一 次 比较 两 个 
元 素 ， 如 果 它 们 的 顺序 错误 就 把 它们 交换 过 来 。 走 访 数列 的 工作 是 重复 地 进行 直到 没 
es 有 再 需要 交换 ， 即 该 数列 已 经 排序 完成 。 这 个 算法 的 名 字 由 来 是 因为 越 小 的 元 素 会 经 
线 上 阅读 ”由 交换 慢 慢 “ 浮 ” 到 数列 的 顶端 。 详 细 说 明 与 实现 代码 请 扫 码 阅读 。 


4.4.5 快速 排序 
沪 回 


通过 一 趟 排序 将 待 排 记录 分 隔 成 独立 的 两 部 分 ， 其 中 一 部 分 记录 的 关键 字 均 比 另 
一 部 分 的 关键 字 小 ， 则 可 分 别 对 这 两 部 分 记录 继续 进行 排序 ， 以 达到 整个 序列 有 序 。 
详细 说 明 与 实现 代码 请 扫 码 阅读 。 


4.4.6 ”计数 排序 


| 
| 计数 排序 (Counting Sort) 是 一 种 稳定 的 排序 算法 。 计 数 排序 使 用 一 个 额外 的 数组 
| C， 其 中 第 i 个 元 素 是 待 排序 数组 A 中 值 等 于 i 的 元 素 的 个 数 。 然 后 根据 数组 C 来 将 A 


中 的 元 素 排 到 正确 的 位 置 。 它 只 能 对 整数 进行 排序 。 详细 说 明 与 实现 代码 请 扫 码 阅读 。 
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使 用 字符 串 


字符 囊 就 是 零 个 或 多 个 排 在 一 起 的 字符 ， 放 在 单 引 号 或 双 引 号 之 中 -。 字符 串 处 理 在 表单 
开发 、HTML 文本 解析 、 异 步 响应 等 领域 广泛 使 用 包括 字符 匹配 、 查 找 、 替 换 、 截 取 、 编 
码 /解码 、 连 接 等 。 本 章 将 详细 讲解 字符 串 的 各 种 基本 操作 


【 学 习 重 点 】 


ml 


吾 于 于 


定义 字符 事 

字符 串 查找 、 连 接 和 截取 
字符 串 检 测 、 替 换 和 编辑 
字符 串 编码 和 解码 


A 网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版 ) 


5.1 字符 串 基 础 


医 网 

， 第 2 章 曾经 介绍 了 字符 串 类 型 ,了 解 了 字符 串 表示 和 简单 操作 ， 本 节 将 在 此 基础 上 进一步 补充 与 
BAL[24 测 字符 中 相关 的 基础 知识 。 

| 


5.1.1 定义 字符 串 


在 JavaScript 中 定义 字符 串 有 多 种 方式 ， 具 体 说 明 如 下 。 
1. 字符 串 直接 量 
| 使 用 双 引 号 或 单 引号 包含 任意 长 度 的 字符 文本 。 例 如 : 
| "abc' 
| nabe" 
由 于 HTML 标签 属性 值 使 用 双 引 号 ， 所 以 很 多 项 目 约定 JavaScript 语言 的 字符 串 只 使 用 单 引号 ， 
当然 只 使 用 双 引 号 也 完全 可 以 。 重 要 的 是 ， 坚 持 使 用 一 种 风格 ， 不 要 两 种 风格 混合 。 
【示例 1】 如 果 长 字符 串 必 须 分 行 显示 ， 可 以 在 每 一 行 的 尾部 使 用 反 斜 杠 。 
var longString = "Long \ 


上 面 代码 表示 ， 加 了 反 斜 杠 以 后 ， 原 来 写 在 一 行 的 字符 串 ， 可 以 分 成 多 行书 写 。 但是， 输出 时 还 
是 单行 ， 效 果 与 写 在 同一 行 完全 一 样 。 注 意 ， 反 斜 杠 的 后 面 必 须 是 换行 符 ， 而 不 能 有 其 他 字符 〈 如 空 
格 )， 和 否则 会 报错 。 

【示例 2】 连 接 运算 符 (+) 可 以 连接 多 个 单行 字符 串 ， 将 长 字符 串 拆 成 多 行书 写 ， 输 出 时 也 是 


line 3 

#/}).:toStringO.splitCn’) slice(1, -1)join(\n) 

上 面 示例 3 输出 的 字符 串 就 是 多 行 。 

2. 构造 字符 串 

使 用 String0 构 造 函 数 可 以 构造 字符 串 ， 该 函数 可 以 接收 一 个 参数 ， 并 把 它 作 为 初始 值 来 初始 化 
字符 串 。 


“ps 
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【示例 4】 下 面 代码 使 用 new 运算 符 调用 String0 构 造 函 数 ， 将 创建 一 个 字符 串 型 对 象 。 


Var s =new String0: // 创建 一 个 空 字符 串 对 象 ， 并 赋值 给 变量 s 
Var s 二 new String(" 我 是 构造 字符 串 "): // 创建 字符 串 对 象 ， 初 始 化 之 后 赋值 给 变量 s 


4 多 注意 : 通过 String 构造 函数 构造 的 字符 事 与 字符 囊 直接 量 的 类 型 不 同 。 前 者 为 引用 型 对 象 ， 后 者 | 二 内 


为 值 类 型 的 字符 串 。 
【示例 5】 下 面 代 码 比 较 了 构造 字符 串 和 字符 串 直 接 量 的 数据 类 型 不 同 。 
varsl = new String(]): // 构造 字符 串 
Var s2="]": / 定义 字符 串 直 接 量 | 
alert(typeof s1); / 返回 object， 说 明 是 引用 型 对 象 | 
alert(typeof s2); / 返回 string， 说 明 是 值 类 型 字符 串 | 


从 上 面 示例 可 以 看 到 ，String 构造 函数 实际 上 是 字符 串 的 包装 类 ， 利 用 它 可 以 把 值 类 型 字符 串 包 | 

装 为 引用 型 对 象 ， 以 实现 特殊 操作 。 | 
【示例 6】String0 也 可 以 作为 普通 函数 使 用 ， 把 参数 转换 为 字符 串 类 型 的 值 返回 。 | 

| 


vars= String(123456): // 包装 字符 串 | 
alert(s); // 返回 字符 串 "123456" | 
alert(typeof s): // 返回 string， 说 明 该 方法 不 再 是 构造 函数 | 

【示例 7】String0 可 以 带 有 多 个 参数 ， 但 是 它 仅 处 理 第 一 个 参数 ， 并 把 它 转 换 为 字符 串 返 回 。 | 
Var s= String(1, 2. 3, 4, 5, 6): // 带 有 多 个 参数 | 
alert(s); // 返回 字符 串 "1" | 
alert(typeof s); // 返回 string， 数 值 被 转换 为 字符 串 


String 构造 函数 也 可 以 附带 多 个 参数 ， 它 仅 负责 构造 第 一 个 参数 ， 并 返回 它 的 字符 串 。 但 是 ， 所 
附带 的 多 个 参数 会 被 JavaScript 执行 计算 。 
【示例 8】 下 面 的 变量 n 在 构造 函数 内 经 过 多 次 计算 之 后 ， 最 后 值 递增 为 5。 


varn=1; / 初始 化 变量 
var s = new String(++n, ++n,++n, ++n); // 字符 串 构造 处 理 
alert(s); / 返回 2 


alert(n): | 
alert(typeof s): 返回 object， 说 明 是 引用 类 型 对 象 | 
alert(typeof mn): // 返回 number， 说 明 是 数值 类 型 | 

| 
3. 使 用 字符 编码 | 


String 类 型 提供 的 静态 方法 〈 即 定义 在 对 象 本 身 ， 而 不 是 定义 在 对 象 实例 的 方法 )， 主 要 是 
fromCharCode()。 该 方法 的 参数 是 一 系列 Unicode 编码 ， 返 回 对 应 的 字符 串 。 
【示例 9】 下 面 代码 演示 了 如 何 把 一 组 字符 串 编码 转换 为 字符 串 。 
var a = [35835. 32773, 24744. 22909]. b =[]: // 声明 一 个 字符 编码 的 数组 


for(variina) { / 遍历 数组 
b.push(String.fromCharCode(a[i])): // 把 每 个 字符 编码 都 转换 为 字符 串 

} 

alert(b.join(™")); / 返回 字符 串 "读者 您 好 " 


a 
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可 以 把 所 有 字符 串 按 顺 序 传递 给 fromCharCode0 方 法 。 
varb = String.fromCharCode(35835, 32773, 24744. 22909) ; // 传递 多 个 参数 ， 返 回 字符 串 " 读 者 您 好 " 
可 以 使 用 apply0 方 法 动态 调用 。 


侠 | var a= [35835. 32773, 24744, 22909], b= 0 
| varb = String.fromCharCode.apply(null, 
人 


| alert(b); 。 // 返回 字符 串 "读者 您 好 " 


窟 提示 :String 的 fomCharCode( 方 法 可 以 与 字符 事 的 charCodeAt0 方 法 配合 使 用 , 执行 相反 操作 。 
charCodeAtO 可 以 把 字符 串 转 换 为 编码 , 而 fomCharCode() 方 法 能 够 把 编码 转换 为 字符 囊 。 


| 5 2 字符 串 与 数组 
字符 串 被 视 为 字符 数组 ,可 以 使 用 数组 的 中 括号 运算 符 来 返回 某 个 位 置 的 字符 〈 位 置 编号 从 0 开 


Vars= 由 ello' 

s[0] / 返回 "h" 

s[1] /1/ 返回 "e" 

s[4] // 返回 "o" 

/ 直接 对 字符 串 使 用 中 括号 运算 符 
‘hello[1] //"e" 


【示例 1] 如 果 中 括号 中 的 数字 超过 字符 串 的 长 度 ,或 者 中 括号 中 根本 不 是 数字 , 则 返回 undefined。 


abec[3] ”// 返回 undefined 
| abc[-1]  / 返回 undefined 
| abc[x] ”// 返回 undefined 
| 


【示例 2】 字符 串 与 数组 只 是 相似 ， 但 是 无 法 改变 字符 串 中 的 单个 字符 。 


var s = 'hello': 
| delete s[0]: 
| s // "hello" 
| s[1] ="'a'; 
S // "hello" 
s[5]=": 
m // "hello" 


| 
| 上 面 代码 表示 ， 字 符 串 内 部 的 单个 字符 无 法 改变 和 增删 ， 这 些 操作 会 默默 地 失败 。 
| 【示例 3】 字 符 串 也 无 法 直接 使 用 数组 的 方法 ， 必 须 通 过 call0 方 法 间接 使 用 。 


var s = 'hello': 
sjoin(')  //TypeError: s.join is not a function 
Array.prototype.join.call(s. '') l"hello" 


在 上 面 代 码 中 ， 如 果 直 接 对 字符 串 使 用 数组 的 join0 方 法 ， 会 报错 不 存在 该 方法 。 但 是 ， 可 以 通 
| 过 call0 方 法 ， 间 接 对 字符 串 使 用 join0 方 法 。 

| 不 过 ， 由 于 字符 串 是 只 读 的 ， 那 些 会 改变 原 数组 的 方法 ， 如 pushO、sort0、reverse0、splice() 都 
| 对 字符 中 无效 ， 上 5 只 有 将 字符 串 显 式 转 为 数组 后 才能 使 用 。 
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5.1.3 ”字符 串 长 度 
length 属性 返回 字符 串 的 长 度 ， 该 属性 为 只 读 ， 无 法 修改 。 例 如 : 


上 面 代码 表示 字符 串 的 length 属性 无 法 改变 ， 但 是 不 会 报错 。 

【拓展 】 

获取 字符 串 的 长 度 ,使 用 length 属性 在 特定 情况 下 是 不 精确 的 ， 因 为 字符 包括 单字 节 、 双 字 节 两 
种 类 型 。 如 果 要 获取 字符 串 的 字 节 长 度 ， 可 以 按 下 面 方法 来 实现 。 

【示例 1】 下 面 代码 为 字符 串 扩展 一 个 原型 方法 lengthBO。 在 这 个 原型 方法 中 ， 枚 举 每 个 字符 ， 
并 根据 字符 的 字符 编码 ， 判 断 当前 字符 是 单字 节 还 是 双 字 节 ， 然 后 递 加 字符 串 的 字 节 数 。 

String .prototypelengthB = functionO { // 返 回 指定 字符 串 的 字 节 数 ， 扩 展 String 类 型 方法 


var b=0, 1= this.length: / 初始 化 字 节 数 递 加 变量 ， 并 获取 字符 串 参数 的 字符 个 数 | 
f(D { // 如 果 存 在 字符 串 ， 则 执行 计算 | 
for (vari=0;i<Li++) { 1/ 遍历 字符 串 ， 枚 举 每 个 字符 | 
这 (this.charCodeAt(i) > 255) { // 字符 编码 大 于 255， 为 双 字 节 字 符 | 
b+4=2: 1/ 则 递 加 2 | 
jelse{ | 
b+tt; // 否则 递 加 1 | 
} | 
} | 

Tetum b: / 返回 字 节 数 
} | 
else { | 
retum 0: / 如 果 参 数 为 空 ， 则 返回 0 个 | 
} | 
} | 
在 页 面 中 应 用 原型 方法 。 | 
var s="String 类 型 长 度 ": // 定义 字符 串 直 接 量 | 
alert(s.lengthB()) 1/ 返回 14 | 
| 
| 


【示例 2】 在 检测 字符 是 否 为 双 字 节 或 单字 节 时 ， 方 法 也 是 有 多 种 的 ， 这 里 再 提供 两 种 思路 。 


for (vari=0;i<LiH) { 


Varc= this.charAt(i); / 获取 当前 字符 | 

六 (escape(c).length>4){ ”// 如 果 字 符 的 转 义 序列 大 于 4 位 ， 说 明 是 双 字 节 | 
bi=2; | 

yelseif(c ="r") { | 
b++: 

} 


有 
或 者 使 用 正则 表达 式 进行 字符 编码 验证 。 
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for (vari=0;i<Li) { 
| varc=this.charAtG): 
| 半 (/^[\u0000-W00f]$/.test(c)) { // /^0000-w00 押 $/ 正 则 表达 式 ， 匹 配 单字 节 字 符 
| b++t; 


a } 

医 网 | else { 
er 
| } 

5.1.4 字符 集 


JavaScript 使 用 Unicode 字符 集 ， 人 允许 在 程序 中 直接 使 用 Unicode 编码 表示 字符 ， 即 将 字符 写成 
\uxxxx 的 形式 ， 其 中 xxxx 代表 该 字符 的 Unicode 编码 。 例 如 ，\u00A9 代表 版 权 符号 。 


Var s = 00A9' 
s// "©" 


解析 代码 时 ，JavaScript 会 自动 识别 一 个 字符 是 字面 形式 表示 ， 还 是 Unicode 形式 表示 。 输 出 给 
用 户 时 ， 所 有 字符 都 会 转 成 字面 形式 。 
Var fu006F\u006F = "abe’; 


| foo // "abe" 

| 

| 上 面 代码 中 , 第 一 行 的 变量 名 foo 是 Unicode 形式 表示 , 第 二 行 是 字面 形式 表示 。JavaScript 会 自 
| 动 识别 。 


每 个 字符 在 JavaScript 内 部 都 是 以 16 位 ( 即 2 个 字 节 ) 的 UTF-16 格式 储存 。 也 就 是 说 , JavaScript 
的 单位 字符 长 度 固 定 为 16 位 长 度 ， 即 2 个 字 节 。 

但 是 , UTF-16 有 两 种 长 度 : 对 于 U+0000 到 U+FFFF 之 间 的 字符 , 长 度 为 16 位 ( 即 2 个 字 节 ); 
对 于 U+10000 到 U+10FFFF 之 间 的 字符 ,长 度 为 32 位 ( 即 4 个 字 节 ), 而 且 前 两 个 字 节 在 0xD800 到 
| 0xDBFF 之 间 ， 后 两 个 字 节 在 0xDC00 到 0xDFFF 之 间 。 

【示例 1】U+1D306 对 应 的 字符 为 三 ， 它 写成 UTF-16 就 是 0xD834 0xDF06。 浏 览 器 会 正确 地 将 
这 4 个 字 节 识别 为 一 个 字符 ， 但 是 JavaScript 内 部 的 字符 长 度 总 是 固定 为 16 位 ， 会 把 这 4 个 字 节 视 
为 两 个 字符 。 
| Vars='D834wDF06': 
s//"E" 
| slength//2 
| /~.$/.test(s) // false 
| s.charAt(0) //"" 

s.charAt(1) //™" 

s.charCodeAt(0) // 55348 

s.charCodeAt(1) // 57094 

上 面 代码 说 明 ， 对 于 U+10000 到 U+10FFFF 之 间 的 字符 ，JavaScript 总 是 视 为 两 个 字符 (字符 的 
length 属性 为 2), 用 来 匹配 单个 字符 的 正则 表达 式 会 失败 (JavaScript 认为 这 里 不 止 一 个 字符 ),charAt0 
| 方法 无 法 返回 单个 字符 ，charCodeAt0 方 法 返回 每 个 字 节 对 应 的 十 进 制 值 。 
| 所 以 处 理 时 ， 必 须 把 这 一 点 考虑 在 内 。 对 于 4 个 字 节 的 Unicode 字符 ， 假 定 C 是 字符 的 Unicode 
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编号 ,HH 是 前 两 个 字 节 ，L 是 后 两 个 字 节 ， 则 它们 之 间 的 换算 关系 如 下 。 


// 将 大 于 U+FFFF 的 字符 ， 从 Unicode 转 为 UTF-16 
H= Math.floor((C - 0x10000) / 0x400) + 0xD800 


L=(C— 0x10000) % 0x400 + 0xDC00 | 会 内 

/ 将 大 于 U+FFFF 的 字符 ， 从 UTF-16 转 为 Unicode | 凡 ~ 
C=(H-0xD800) * 0x400 +L- 0xDC00+0x10000 yxote 
下 面 的 正则 表达 式 可 以 识别 所 有 UTF-16 字符 。 


(Co-wD7FFwE000-WFFFF]I[wD800-uDBFF][wDC00-wDFFF]) 
由 于 JavaScript 引擎 不 能 自动 识别 辅助 平面 (编号 大 于 0xFFFF) 的 Unicode 字符 ， 导 致 所 有 字符 
串 处 理 函 数 遇 到 这 类 字符 ， 都 会 产生 错误 的 结果 。 如 果 要 完成 字符 串 相 关 操作 ， 就 必须 判断 字符 是 否 
落 在 0xD800 一 0xDFFF。 
【示例 2】 下 面 是 能 够 正确 处 理 字符 串 遍历 的 函数 。 


function getSymbols(string) { | 

Var length = string.length: | 
Var index = -1; | 
var output = []; 
Var character; 
Var charCode; 
while (++index < length) { 

character = string.charAt(index); 

charCode = charactercharCodeAt(0): 

if (charCode >= 0xD800 && charCode <= 0xDBFF) { 

output.push(character + string.charAt(++index)):; 


} 
else { 


output.push(character); 


上 
9 
retum output 
; 
var symbols = getSymbols( 三 ): 
symbols forEach(finction(symbol) { 
es 
D: 
蔡 换 (String.prototype.replace )、 截 取 子 字符 串 〈String.prototype.substring，String.prototype.slice ) 
等 其 他 字符 串 操作 ， 都 必须 做 类 似 的 处 理 。 


5.1.5 “Base64 转 码 


Base64 是 一 种 编码 方法 ， 可 以 将 任意 字符 转 成 可 打印 字符 。 使 用 这 种 编码 方法 ， 主 要 不 是 为 了 
加 密 ， 而 是 为 了 不 出 现 特殊 字符 ， 简 化 程序 的 处 理 。 

JavaScript 原生 提供 两 个 Base64 相关 方法 。 

btoa0: 字符 串 或 二 进 制 值 转 为 Base64 编码 。 

atob(): Base64 编码 转 为 原来 的 编码 。 
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Var string = 'Hello World!;: 
btoa(string) // "SGVsbG8gV29ybGQh" 
atob(SGVsbG8gV29ybGQh) // "Hello World'" 


这 两 个 方法 不 适合 非 ASCII 码 的 字符 ， 会 报错 。 

btoa(' 你 好 ') 

| 【示例 】 要 将 非 ASCII 码 字 符 转 为 Base64 编码 ， 必 须 中 间 插 入 一 个 转 码 环节 ， 再 使 用 这 两 个 
| 方法 。 


function b64Encode(str) { 
ITetum btoa(encodeURIComponent(str)): 


} 
function b64Decode(str) { 
Tetum decodeURIComponent(atob(str)): 


} 
b64Encode(' 你 好 ') // "JUUOJUJEJUEWwJUU1JUE1JUJE" 


b64Decode(JUUOJUJEJUEwJUU1JUE1JUJE) // "你 好 " 


5.2 使 用 String 


| string 是 Javaseript 标准 库 对 象 ， 预 定义 了 很 多 原型 方法 ， 使 用 这 些 原型 方法 ， 可 以 方便 用 户 灵 
| 活 处 理 字符 串 。 使 用 String0 构 造 函 数 可 以 定义 新 字符 串 ， 详 细 说 明 可 参考 5.1.1 节 内 容 。 


5.2.1 字符 串 的 表示 和 值 
1.toString() 
使 用 toString0 方 法 可 以 返回 字符 串 的 表示 。 例 如 : 


| 
| Var s = "javascript"; 
| vara=stoString0: ”// 返回 字符 串 "javascript" 


由 于 该 方法 的 返回 值 与 字符 串 本 身 相 同 ， 所 以 一 般 不 会 调用 这 个 方法 。 
2. valueOf() 
使 用 valueOf0 方 法 可 以 返回 字符 串 的 值 。 例 如 : 


Var s = "javascript": 
vara=s.ValueOf0; ”// 返回 字符 串 "javascript" 


【示例 】 可 以 重 写 这 两 个 方法 ， 自 定义 返回 值 。 下 面 代码 重 写 toString0 方 法 ， 实 现 HTML 格式 


Var s= "abcdef"; 

| document writeln(s): // 显示 字符 串 "abcdef" 

| document.writeln(s.toString0): 。“// 调用 字符 串 的 toString0， 把 字符 串 对 象 转换 为 字符 串 显示 
// 重 写 String 类 型 的 原型 方法 toString0 
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/ 参数 color 表示 显示 字符 串 的 颜色 

String.prototype.toString = function(color) { 
var color = color | "red"; / 如果 省 略 参数 ， 则 显示 为 红色 
retum '<font color=" + color + ">" + this.valueOf) + '</font>"; 

/ 返回 格式 化 显示 带 有 颜色 的 字符 串 

} 

document.writeln(s.toStringO): // 显示 红色 字符 串 "abcdef' 

document.writeln(s.toString("blue")); 。 // 显示 蓝 色 字符 串 "abcdef" 


上 面 示 例 重 写 toString0 方 法 ， 可 以 以 HTML 格式 化 方式 显示 字符 串 的 值 。 
5.2.2 ”连接 字符 串 


把 多 个 字符 串 连 接 在 一 起 的 最 简单 方法 是 使 用 加 号 运算 符 。 

使 用 concat0 方 法 也 可 以 连接 两 个 字符 串 ， 返 回 一 个 新 字符 串 ， 不 改变 原 字符 串 。 例 如 : 

Var sl ='abc': | 

Var s2 = 'def | 

sl.concat(s2) // "abcdef" | 

sl // "abe" 

【示例 】 该 方法 可 以 接受 多 个 参数 。 

'a'.concat('b', 'c") // "abe" 

如 果 参 数 不 是 字符 串 ，concat( 方 法 会 将 其 先 转 为 字符 串 ， 然 后 再 连接 。 

Var one= 1; 

Var two =2; 

Var three = "3"; 

".concat(one, two., three) // "123" 

one + two + three // "33" 

在 上 面 代码 中 ，concat0 方 法 将 参数 先 转 成 字符 串 再 连接 ， 所 以 返回 的 是 一 个 3 个 字符 的 字符 串 。 
作为 对 比 ,加 号 运算 符 在 两 个 运算 数 都 是 数值 时 , 不 会 转换 类 型 ,所 以 返回 的 是 一 个 两 个 字符 的 字符 串 。 


5.2.3 ”获取 指定 位 置 字符 


1. charAt() 
charAt0 方 法 返回 指定 位 置 的 字符 ， 参 数 是 从 0 开始 编号 的 位 置 。 例 如 : 
var s= new String('abe"): 
s.charAt(1) // "b" 
s.charAt(s.length - 1)//"e" 
【示例 1】 这 个 方法 完全 可 以 用 数组 下 标 蔡 代 。 
‘abc'.charAt(1) // "b" 
‘abc[1] // "b" 
如 果 参 数 为 负数 ， 或 大 于 等 于 字符 串 的 长 度 ，charAt0 返 回 空 字符 串 。 


‘abc'.charAt(—1) //™ 
‘abc'.charAt(3) //™" 


So 
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【示例 2】 使 用 charAtO 把 字符 串 中 每 个 字符 都 装 入 一 个 数组 中 ， 从 而 可 以 为 String 类 型 扩展 一 
| 个 原型 方法 ， 用 来 把 字符 串 转换 为 数组 。 
String.prototype.toArray = function( { / 把 字符 串 转 换 为 数组 

var 1= this.length, a = []: / 获取 当前 字符 串 长 度 ， 并 定义 空 数组 

i OD{ / 如 果 存 在 则 执行 循环 操作 

for(vari=0;i<Lit+) { / 遍历 字符 串 ， 间 接 枚 举 每 个 字符 

| a.push(this.charAt(i)); 。 / 把 每 个 字符 按 顺序 装 入 数组 
| } 
3 
retum a; // 返回 数组 


} 
然后 对 字符 串 的 所 有 字符 进行 遍历 。 


var s = "abcdefehijklmn".toArray0: 。 “”// 把 字符 串 转 换 为 数组 
for (variins) { / 遍历 被 转换 的 字符 串 ， 并 枚 举 每 个 字符 
alert(s[i]); 


| 

| 
2. charCodeAt() 
| charCodeAt0 方 法 返回 给 定位 置 字符 的 Unicode 编码 (十 进 制 表示 ), 相当 于 String.from CharCode() 
| 的 逆 操 作 。 例 如 : 


| 
| ‘abc'.charCodeAt(1) // 98 


上 面 代码 中 ，abe 的 1 号 位 置 的 字符 是 b， 它 的 Unicode 编码 是 98。 
| 如 果 没 有 任何 参数 ，charCodeAt0 返 回首 字符 的 Unicode 编码 。 
| ‘abc'.charCodeAtO // 97 
| 上 面 代码 中 ， 首 字符 a 的 Unicode 编号 是 97。 

如 果 参 数 为 负数 ， 或 大 于 等 于 字符 串 的 长 度 ，charCodeAtO0 返 回 NaN。 
| 注意 : charCodeAt0 方 法 返回 的 Unicode 编码 不 大 于 65536 ( 0xFFFF ) ， 即 只 返回 两 个 字 节 的 字 
| 符 的 编码 。 如 果 遇 到 Unicode 编码 大 于 65536 的 字符 ， 必 需 连 续 使 用 两 次 charCodeAt0， 
| 不 仅 读 入 charCodeAt(i)， 还 要 读 入 charCodeAt(it1)， 将 两 个 16 字 节 放 在 一 起 ， 才 能 得 到 

准确 的 字符 。 


5.2.4 ”获取 字符 的 位 置 
回 


视频 讲解 | indexOf0 和 lastIndexOf0) 方 法 用 于 确定 一 个 字符 串 在 另 一 个 字符 串 中 的 位 置 ， 都 返回 一 个 整数 ， 
| 表示 匹配 开始 的 位 置 。 如 果 返 回 -1， 就 表示 不 匹配 。 

| 二 者 的 区 别 在 于 ，indexOf0 方 法 从 字符 串 头 部 开始 匹配 ，lastIndexOf0) 方 法 从 尾部 开始 匹配 。 

| 例如 

| ‘hello world'.indexOf('0") // 4 

| ‘JavaScript'indexOf'script’) // -1 

| ‘hello world'.lastIndexOf('0") // 7 
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它们 还 可 以 接受 第 二 个 参数 ， 对 于 indexOf0 方 法 ， 第 二 个 参数 表示 从 该 位 置 开始 向 后 匹配 对 | 
于 lastIndexOf0， 第 二 个 参数 表示 从 该 位 置 起 向 前 匹配 。 例 如 | 


‘hello world'.indexOf('o', 6) //7 
‘hello world'.lastIndexOft'o', 6) // 4 | 图 


从 提示 : 对 于 indexOf0 方 法 的 第 二 个 参数 : iote 


回 如 果 值 为 负数 ， 则 视 为 0， 就 相当 于 从 第 一 个 字符 开始 查找 。 
回 如 果 省 略 了 这 个 参数 ， 也 将 从 字符 串 的 第 一 个 字符 开始 查找 。 
回 如 果 值 大 于 等 于 length 属性 值 ， 则 视 为 当前 字符 串 中 没有 指定 的 子 字 符 串 ， 即 返回 -1。 


< 注意 : indexOf0 方 法 是 按 着 从 左 到 右 的 顺序 查找 ;而 lastindexOf() 方 法 是 从 右 到 左 进行 查找 


5.2.5 ”查找 字符 串 


1. search() | 视频 讲解 
search() 方 法 查找 参数 字符 串 在 调用 字符 串 中 第 一 次 出 现 的 位 置 。 | 
【示例 1】 下 面 代 码 使 用 search0 方 法 匹配 斜 杠 字符 在 URL 字符 串 的 下 标 位 置 。 


Var s = "http:// www.mysite.cn/index.html": 
varn=s.search("//"); // 返回 值 为 5 


容 提示 : 加 ”search0 方 法 的 参数 为 正则 表达 式 (RegExp 对 象 ) 。 如果 参 数 不 是 RegExp 对 象 ， 则 
JavaScript 会 使 用 RegExp0 〇 构造 函数 把 它 转换 成 RegExp 对 象 。 
回 search(O 方 法 遵循 从 左 到 右 的 查找 顺序 ,并 返回 第 一 个 匹配 的 子 字符 串 的 起 始 下 标 位 置 。 
如 果 没 有 找到 ， 则 返回 -1。 
回 search( 方 法 无 法 查找 指定 的 范围 ， 始 终 返 回 第 一 个 匹配 子 字符 串 的 下 标 位 置 。 


2. match() 
match() 方 法 能 够 找 出 所 有 匹配 的 子 字符 串 ， 并 存储 在 一 个 数组 中 返回 。 例 如 : 


Var s = "http:// www.mysite.cn/index.html"; 
vara= smatch(h/g): / 全 局 匹配 所 有 字符 h 
alert(a): / 返回 数组 [h.h] 


肉 提示 : 回 match0 方 法 返回 的 是 一 个 数组 ， 如 果 不 是 全 局 匹配 ， 那 么 match0 方 法 只 能 执行 一 次 
匹配 。 例 如 ， 下 面 匹配 模式 没有 g 修饰 符 ， 只 能 够 执行 一 次 匹配 ， 返 回 仅 有 一 个 元 素 
了 的 数组 。 


var a = s.match(/h/): / 返回 数组 [h] 

如 果 没 有 找到 匹配 字符 ， 则 返回 null， 而 不 是 空 数组 。 

当 不 执行 全 局 匹配 时 ， 如 果 匹 配 模式 包含 子 表 达 式 ， 则 返回 的 数组 中 包含 子 表达 式 匹 配 的 
信息 。 
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【示例 2】 下 面 代码 使 用 match0 方 法 匹配 URL 字符 串 中 所 有 点 号 字符 。 
vars= "http:// www.mysite.cn/index.html": ”// 匹配 字符 串 
var a = s.match(/(\).*(\).*()/); / 执行 一 次 匹配 检索 
会 内 | alert(alength): // 返回 4， 说 明 返 回 的 是 一 个 包含 4 个 元 素 的 数组 
= 一 alert(a[0]); // 返回 字符 串 ".mysite.cn/index." 
| alert(a[1]); // 返回 第 一 个 字符 .〈 点 号 )， 由 第 一 个 子 表达 式 匹配 

alert(a[2]); // 返回 第 二 个 字符 .〈 点 号 )， 由 第 二 个 子 表 达 式 匹配 
| alert(a[3]): // 返回 第 三 个 字符 .〈 点 号 )， 由 第 三 个 子 表 达 式 匹配 

在 这 个 正则 表达 式 “/).*().*()/” 中 ,左右 两 个 斜 杠 是 匹配 模式 分 隔 符 ，JavaScript 引擎 能 够 根 
| 沽 二 两 个 办 山 符 来 识别 正 章 表 达 式 。 在 正则 表达 式 中 小 括号 表示 子 表达 式 ， 每 个 子 表 达 式 匹配 的 文本 
信息 都 会 被 独立 存储 ， 以 备 调用 。 反 和 斜 杠 表示 转 义 序列 ， 因 为 点 号 在 正则 表达 式 中 表示 匹配 任意 字 
符 ， 星 号 表示 前 面 的 匹配 字符 可 以 匹配 任意 多 次 。 
| 在 上 面 示例 中 ， 数 组 a 并 非 仅 有 一 个 元 素 ， 而 是 包含 4 个 元 素 ， 且 每 个 元 素 存储 着 不 同 的 信息 。 
| 其 中 第 一 个 元 素 存放 的 是 匹配 文本 ， 其 余 的 元 素 存放 的 是 与 正则 表达 式 的 子 表达 式 匹 配 的 文本 。 
| 另外 ， 这 个 数组 还 包含 两 个 对 象 属性 ， 其 中 index 属性 存储 匹配 文本 的 起 始 字 符 在 字符 串 中 的 位 
| 置 ，input 属性 存储 的 是 匹配 字符 串 的 引用 。 
”alert(a.index); // 返回 值 10， 说明 第 一 个 点 号 字符 的 起 始 下 标 位 置 

alert(a.input); / 返回 被 匹配 字符 串 "http:/ www.mysite.cn/index.html" 
| 在 全 局 匹配 模式 下 ， 即 附带 有 g 修饰 符 。match0 将 执行 全 局 匹配 。 此 时 返回 的 数组 元 素 存放 
| 的 是 字符 串 中 所 有 匹配 文本 ， 该 数组 没有 index 属性 和 input 属性 。 同 时 不 再 提供 子 表 达 式 
| 匹配 的 文本 信息 ， 也 不 声明 每 个 匹配 子 串 的 位 置 。 如 果 需 要 这 些 全 局 检索 的 信息 ， 可 以 使 用 
RegExp.exec() 方 法 。 


5.2.6 截取 字符 串 


1. slice() 


slice0 方 法 用 于 从 原 字符 串 取 出 子 字符 串 并 返回 ， 不 改变 原 字符 串 。 它 的 第 一 个 参数 是 子 字符 串 
的 开始 位 置 ， 第 二 个 参数 是 子 字符 串 的 结束 位 置 (不 含 该 位 置 )。 例 如 : 
‘JavaScript'.slice(0, 4) // "Java" 
如 果 省 略 第 二 个 参数 ， 则 表示 子 字符 串 一 直到 原 字符 串 结束 。 
| ‘JavaScript'.slice(4) // "Script" 
| 如 果 参 数 是 负 值 ， 表 示 从 结尾 开始 倒数 计算 的 位 置 ， 即 该 负 值 加 上 字符 串 长 度 。 
| 
‘JavaScript'.slice(-6) // "Script" 
‘JavaScript'.slice(0. -6) // "Java" 
| JavaScript'slice(-2. -D)W pn" 
| 如果 第 一 个 参数 大 于 第 二 个 参数 ，slice( 方 法 返回 一 个 空 字符 串 。 
| JavaScript'slice(2. 1) N 


2. substring() 
| substring0 方 法 用 于 从 原 字符 串 取出 子 字符 串 并 返回 ,不 改变 原 字符 串 。 它 与 slice0 作 用 相同 , 但 
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有 一 些 奇 怪 的 规则 ， 因 此 不 建议 使 用 这 个 方法 ， 优 先 使 用 slice0。 
substring() 方 法 的 第 一 个 参数 表示 子 字符 串 的 开始 位 置 ， 第 二 个 位 置 表示 结束 位 置 。 例 如 : 
‘JavaScript'.substring(0. 4) // "Java" 
如 果 省 略 第 二 个 参数 ， 则 表示 子 字符 串 一 直到 原 字符 串 结束 。 
‘JavaScript'.substring(4) // "Script" 
如 果 第 二 个 参数 大 于 第 一 个 参数 ，substring0 方 法 会 自动 更 换 两 个 参数 的 位 置 。 
‘JavaScript’.substring(10, 4) // "Script" 
// 等 同 于 | 
‘JavaScript’.substring(4, 10) // "Script" | 
在 上 面 代码 中 ， 调 换 substring0 方 法 的 两 个 参数 ， 得 到 同样 的 结果 。 | 
如 果 参 数 是 负数 ，substring0 方 法 会 自动 将 负数 转 为 0。 
avascript.substring(-3) // "JavaScript" | 
‘JavaScript'.substring(4, -3) // "Java" | 
| 
上 面 第 二 行 代码 ， 参 数 -3 会 自动 变 成 0， 等 同 于 JavaScript.substring(4, 0)。 由 于 第 二 个 参数 小 于 
第 一 个 参数 ， 会 自动 互 换 位 置 ， 所 以 返回 Java。 
3. substr() 
substr0 方 法 用 于 从 原 字符 串 取 出 子 字符 串 并 返回 ， 不 改变 原 字符 串 。 
substr0 方 法 的 第 一 个 参数 是 子 字符 串 的 开始 位 置 ， 第 二 个 参数 是 子 字符 串 的 长 度 。 例 如 : 
‘JavaScript’.substr(4. 6) // "Script" 
如 果 省 略 第 二 个 参数 ， 则 表示 子 字符 串 一 直到 原 字符 串 结束 。 
‘JavaScript’.substr(4) // "Script" 
如 果 第 一 个 参数 是 负数 ， 表 示 倒 数 计算 的 字符 位 置 。 如 果 第 二 个 参数 是 负数 ， 将 被 自动 转 为 0， 
因此 会 返回 空 字符 串 。 
‘JavaScript'.substr(-6) // "Script" 
avaScript.substr(4. -DVN 
上 面 第 二 行 代码 ， 由 于 参数 -1 自动 转 为 0， 表示 子 字 符 串 长 度 为 0， 所 以 返回 空 字符 串 。 
【示例 1】 在 下 面 示例 中 使 用 lastIndexOf() 获 取 字 符 串 的 最 后 一 个 点 号 的 下 标 位 置 ， 然 后 从 其 后 
的 位 置 开始 截取 4 个 字符 。 
var s = "http:// www.mysite.cn/index.html": 
Var b= s.substr(s.lastIndexOf".")+1. 4): // 截取 最 后 一 个 点 号 后 4 个 字符 
alert(b): // 返回 子 字符 串 "html" 


【示例 2】 下 面 代码 使 用 substring0 方 法 截取 URL 字符 串 中 网 站 主机 名 信息 。 


Var s = "http:// www.mysite.cn/index.html": 

vara=sindexOf"www"): // 获取 起 始点 下 标 

varb=s.indexOf("/", a); // 获取 结束 点 下 标 

var c 二 s.substring(a, b): // 返回 字符 串 wwwmysite.cn， 使 用 substring0 方 法 
vard=s.slice(a.b):/ 返回 字符 串 "www.mysite.cn"， 使 用 slice0 方 法 


i 


几 个 方法 不 同 ， 而 是 以 字符 串 直 接 量 的 文本 模式 进行 匹配 。 第 二 个 参数 可 以 是 蔡 换 的 文本 ， 或 者 是 生 
| 成 替换 文本 的 函数 ， 把 函数 返回 值 作为 蔡 换文 本 来 蔡 换 匹 配 文本 。 
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| 5.2.7 ”替换 字符 串 


replace() 方 法 能 够 实现 字符 串 蔡 换 ， 该 方法 包含 两 个 参数 ， 第 一 个 参数 表示 执行 匹配 的 正则 表达 
第 二 个 参数 表示 准备 代替 匹配 的 子 字符 串 。 
【示例 1】 下 面 代码 使 用 replace0 方 法 修改 字符 串 中 html 为 htm。 


var s = "http:// www.mysite.cn/index.html"; 
varb=s.replace(/html/, "htm"); 。 // 把 字符 串 html 替换 为 htm 
alert(b); /| 返回 字符 串 "http:// www.mysite.cn/index.htm" 


该 方法 第 一 个 参数 是 一 个 正则 表达 式 对 象 ， 也 可 以 传递 字符 串 ， 如 下 所 示 。 
varb=s.replace("html", "htm"); / 把 字符 串 html 蔡 换 为 htm 
不 过 replace() 方 法 不 会 把 字符 串 转换 为 正则 表达 式 对 象 ， 这 与 查找 字符 串 中 search0 和 match() 等 


【示例 2】 下 面 代码 在 使 用 replace0 方 法 时 ， 灵 活 使 用 蔡 换 函 数 修改 匹配 字符 串 。 


var s = "http:// www.mysite.cn/index.html"; 
function f(x) { 1/ 替换 文本 函数 
ITetum x.substring(x.lastIndexOf(".") + 1, x.length - 1) // 获取 扩展 名 部 分 字符 串 


} 
varb=s.replace(/(html)/, f(s)); 。// 调用 函数 指定 替换 文本 操作 
alert(b): // 返回 字符 串 "http:// www.mysite.cn/index.htm" 


replace( 方 法 实际 上 执行 的 是 同时 查找 和 蔡 换 两 个 操作 。 它 将 在 字符 串 中 查找 与 正则 表达 式 相 匹 


| 配 的 子 字 符 串 ， 然 后 调用 第 二 个 参数 值 或 蔡 换 函数 葵 换 这 些 子 字符 串 。 如 果 正则 表达 式 具有 全 局 性 质 


g， 


那么 将 替换 所 有 的 匹配 子 字符 串 ， 和 否则 ， 它 只 蔡 换 第 一 个 匹配 子 字 符 串 。 
【示例 3】 在 replace0 方 法 中 约定 了 一 个 特殊 的 字符 ($)， 这 个 美元 符号 如 果 附 加 一 个 序号 就 表 


示 对 正则 表达 式 中 匹配 的 子 表达 式 存储 的 字符 串 引 用 。 


Var s = "javascript": 
varb = s.replace(/(java)(script)/, "$2-$1"); 。”// 交换 位 置 
alert(b); // 返回 字符 串 "script-java” 


在 上 面 示例 中 ， 正 则 表达 式 /Gjava)(script)/ 中 包含 两 对 小 括号 ， 按 顺序 排列 ， 其 中 第 一 对 小 括号 表 


| 示 第 一 个 子 表达 式 ， 第 二 对 小 括号 表示 第 二 个 子 表达 式 ， 在 replace() 方 法 的 参数 中 可 以 分 别 使 用 字符 
串 "$1" 和 "$2" 来 表示 对 它们 匹配 文本 的 引用 ， 当 然 它 们 不 是 标识 符 ， 仅 是 一 个 标记 ， 所 以 不 可 以 作为 
变量 参与 计算 。 除 了 上 面 约定 之 后 ， 美 元 符号 与 其 他 特殊 字符 组 合 还 可 以 包含 更 多 的 语义 ， 详 细 说 明 
如 表 5.1 所 示 。 


表 5.1 replace() 方 法 第 二 个 参数 中 特殊 字符 


约定 字符 串 说 明 
$1、$2、...、$99 与 正则 表达 式 中 的 第 1 一 99 个 子 表达 式 相 匹配 的 文本 
$& (美元 符号 + 连 字符 ) 与 正则 表达 式 相 匹配 的 子 字符 串 
$ (美元 符号 + 切换 技能 键 ) 位 于 匹配 子 字符 串 左 侧 的 文本 
$' (美元 符号 + 单 引号 ) 位 于 匹配 子 字符 串 右 侧 的 文本 


$5 表示 $ 符 号 
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【示例 4】 重 复 字符 串 。 


Var s = "javascript"; 
varb = s.replace(/.*/, "$&$&"): // 返回 字符 串 " javascriptjavascript " 


由 于 字符 串 “$&” 在 replace0 方 法 中 被 约定 为 正则 表达 式 所 匹配 的 文本 ， 所 以 利用 它 可 以 重复 引 | 
用 匹配 的 文本 ， 从 而 实现 字符 串 重复 显示 效果 。 其 中 正则 表达 式 “/.*/” 表 示 完 全 匹配 字符 串 。 | 
【示例 5】 对 匹配 文本 左 侧 的 文本 完全 引用 。 


Var s = "javascript"; 
varb=s.replace(/script/, "$& !=$'"); ”// 返回 字符 串 "javascript != java" 


其 中 字符 “$&” 代 表 匹 配子 字符 串 "script"， 字 符 "$`" 代 表 匹 配 文本 左 侧 文本 “java”。 | 
【示例 6】 对 匹配 文本 右 侧 的 文本 完全 引用 。 | 


var s = "javascript"; 
var b = s.replace(/java/, "$&S'is "): // 返回 字符 串 "javascript is script" 


其 中 字符 “$&” 代 表 匹 配子 字符 串 "java"， 字 符 "$" 代 表 匹 配 文本 右 侧 文本 "script'。 然 后 把 "9&S' 
is "所 代表 的 字符 串 "javascriptis " 蔡 换 原 字符 串 中 的 "java" 子 字符 串 , 即 组 成 一 个 新 的 字符 串 "javascript | 
is script"。 切 换 技能 键 与 单 引号 键 比较 相似 ， 使 用 时 很 容易 混淆 。 | 


5.2.8 大 小 写 转换 
String 对 象 预定 义 4 个 原型 方法 实现 字符 串 大 小 写 转换 操作 ， 说 明 如 表 5.2 所 示 。 
表 5.2 String 字符 串 大 小 写 转换 方法 


字符 串 方法 


| 
| 
将 字符 串 转换 成 大 写 | 
将 字符 串 转换 成 小 写 
将 字符 串 转换 成 大 写 


【示例 】 下 面 代码 把 字符 串 全 部 转换 为 大 写 形式 。 


Vars= "javascript"; 
alert(stoUpperCaseO): /| 返回 字符 串 " JAVASCRIPT" 


String 类 型 定义 了 toLocaleLowerCase0 和 toLocaleUpperCase0 了 两 个 本 地 化 方法 。 它 们 能 够 按照 本 | 
地 方式 转换 大 小 写字 母 ， 由 于 只 有 几 种 语言 (如 土耳其 语 ) 具有 地 方 特有 的 大 小 写 映射 所 以 通常 与 | 
toLowerCase() 和 toUpperCase() 方 法 的 返回 值 一 样 。 


5.2.9 比较 字符 串 
JavaScript 在 比较 字符 串 大 小 时 ， 根 据 字符 的 Unicode 编码 大 小 ， 逐 位 进行 比较 。 
例如 ， 小 写字 母 a 的 编码 为 97， 大 写字 母 A 的 编码 为 65， 则 比较 时 字符 串 "a" 就 大 于 "A"。 
alert("a" > "A"); // 返回 tme 


用 户 也 可 以 根据 本 地 的 一 些 约定 来 进行 排序 。 例 如 ， 在 西班牙 语 中 根据 本 地 排序 约定 ，"ch" 将 作 
为 一 个 字符 排 在 "e" 和 "d" 之 间 。 


| 
| 
| 
| 
人 
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使 用 localeCompare() 方 法 可 以 根据 本 地 特定 的 顺序 来 比较 两 个 字符 串 。 
【 示例】 下面 代码 把 字符 串 "javascript" 转 换 为 数组 ， 然 后 按 本 地 字符 顺序 进行 排序 。 


Var s = "javascript"; / 定义 字符 串 直接 量 
仿 六 | var a = s.split(™"): // 把 字符 串 转 换 为 数组 
| Var s1 =a.sort(function(a. b) { / 对 数组 进行 排序 
Tetum a.localeCompare(b) / 将 根据 前 后 字符 在 本 地 的 约定 进行 排序 
| D; 
| a=s1.join(™"); / 然后 再 把 数组 还 原 为 字符 串 
| alert(a): // 返回 字符 串 "aacijprstv" 


| 如 果 为 localeCompare0 方 法 指定 的 字符 小 于 参数 字符 ， 则 localeCompare0 返 回 小 于 0 的 数 ， 如 果 
| 为 该 方法 指定 的 字符 大 于 参数 字符 ， 则 返回 大 于 0 的 数 ， 如 果 两 个 字符 串 相等 , 或 根据 本 地 排序 规约 
| 没有 区 别 ， 该 方法 返回 0。 对 于 一 般 计 算 机 系统 来 说 ， 默 认 排序 约定 都 是 按 着 字符 编码 来 执行 。 


5.2.10 ”转换 为 数组 


| 使 用 split0 方 法 可 以 根据 指定 的 分 隔 符 把 字符 串 分 解 为 数组 ， 数 组 中 不 包含 分 隔 符 。 
| 【示例 1】 如 果 参 数 为 空 字符 串 ， 则 split0 方 法 能 够 按 单个 字符 进行 分 切 ， 然 后 返回 与 字符 串 等 


| 长 的 数组 。 

| Vars= "javascript"; 

| var a = s.split(™"); // 按 字 符 空隙 分 割 

| alert(s.length): // 返回 值 为 10 

| alert(a.length); // 返回 值 为 10 

| 【示例 2】 如 果 参 数 为 空 ， 则 split0 方 法 能 够 把 整个 字符 串 作为 一 个 元 素 的 数组 返回 ， 它 相当 于 

| 把 字符 串 转换 为 数组 。 

| 

| Var s = "javascript"; 

| var a = 5.split(): // 空 分 割 

| alert(a.constructor 一 Array); // 返回 trtue， 说 明 是 Array 实例 
alert(a.length): // 返回 值 为 1， 说 明 没有 对 字符 串 进行 分 割 


| 
| 【示例 3】 如 果 参 数 为 正则 表达 式 ， 则 split( 方 法 能 够 以 匹配 文本 作为 分 隔 符 进行 切 分 。 
| Vars= "a2b3c4dSe678fl2g": 


vara= s.split(N\d+/): // 把 匹配 的 数字 作为 分 隔 符 来 切 分 字符 串 
alert(a): / 返回 数组 [ab.c ,d.e. fg] 
alert(a.length): / 返回 数组 长 度 为 7 


| 【示例 4】 如 果 正 则 表达 式 匹配 的 文本 位 于 字符 串 的 边沿 ， 则 split0 方 法 也 执行 分 切 操作 ， 且 
| 为 数组 添加 一 个 空 元 素 。 但 是 在 正 浏览 器 中 会 忽略 边沿 空 的 字符 串 ， 而 不 是 把 它 作 为 一 个 空 元 素 


| 来 看 待 。 
| var s ="122a2b3c4d5e678f12g": // 虽然 字符 串 左 侧 也 有 匹配 的 数字 
| var a = s.split(\d+/):; / 把 匹配 的 数字 作为 分 隔 符 来 切 分 字符 串 
| alert(a): / 返回 数组 [.a.b.c .de, fg] 
alert(a.length): // 返回 数组 长 度 为 8 


| 如 果 在 字符 串 中 指定 的 分 隔 符 没 有 找到 ， 则 返回 一 个 包含 整个 字符 串 的 数组 。 
| 【示例 5】split0 方 法 支持 第 二 个 参数 ， 该 参数 是 一 个 可 选 的 整数 ， 用 来 指定 返回 数组 的 最 大 长 


.140 . 


第 9 章 使 用 字符 训 | 
Zs 


度 。 如 果 设置 了 该 参数 ， 返 回 的 数组 长 度 不 会 多 于 这 个 参数 指定 的 值 。 如 果 没 有 设置 该 参数 ， 整 个 字 
符 串 都 被 分 割 ， 不 考虑 数组 长 度 。 


var s = "javascript"; 


var a = ssplit("".4); / 按 顺序 从 左 到 右 ， 仅 分 切 4 个 元 素 的 数组 
alert(a): // 返回 数组 [jav ,a] 
alert(alength): / 返回 值 为 4 


正则 表达 式 来 实现 。 


var s = "aa2bb3cc4dd5e678f12g"; | 
var a = s.split(/(d)/):; / 使 用 小 括号 包含 数字 分 隔 符 | 
alert(a): // 返回 数组 [aa.2.bb,3,cc,4.dd,5,e,6,,7,.8,£1,,2.g] | 


【示例 6】 如 果 想 使 返回 的 数组 包括 分 隔 符 或 分 隔 符 的 一 个 或 多 个 部 分 ， 可 以 使 用 带子 表达 式 的 | 


5.2.11 ”修剪 字符 串 | 
trim 方法 用 于 去 除 字符 串 两 端的 空格 ， 返 回 一 个 新 字符 串 ， 不 改变 原 字 符 串 。 例 如 : 


' hello world ‘trimO // "hello world" | 
该 方法 去 除 的 不 仅 是 空格 ， 还 包括 制 表 符 (t、\w)、 换 行 符 (n〉 和 回 车 符 (r)。 例 如 : | 
emabc Wtrim) Jabc' 
【拓展 】 | 


也 可 以 自 定义 修剪 方法 ， 以 实现 更 灵活 的 操作 字符 串 ， 下 面 为 JavaScript 的 
String 类 型 扩展 多 个 字符 串 修剪 方法 。 由 于 需要 一 定 的 正则 表达 式 基础 ， 我 们 仅 
以 选 学 内 容 在 线 呈 现 ， 感 兴趣 的 读者 请 扫 码 阅读 。 


53 案例 实战 


本 节 以 案例 的 形式 介绍 字符 串 的 更 多 操作 。 
5.3.1 格式 化 字符 串 


JavaScript 定义 了 一 组 格式 化 字符 串 的 方法 ， 如 表 5.3 所 示 。 注 意 ， 由 于 这 些 方法 没有 获得 
ECMAScript 标准 的 支持 ， 应 谨慎 使 用 。 


视频 讲解 


表 5.3 String 类 型 的 格式 化 字符 串 方法 


方 ” 法 说 明 | 
anchor0 返回 HTML a 标签 中 name 属性 值 为 String 字符 串 文本 的 锚 | 
big0 返回 HTML big 标签 定义 的 大 字体 | 
blinkO 返回 使 用 HTML blink 标签 定义 的 闪烁 字符 串 | 
bold0 返回 使 用 HIML b 标签 定义 的 粗 体 字符 串 | 
fixed0 返回 使 用 HTML tt 标签 定义 的 单间 距 字符 串 | 
fontcolor0 返回 使 用 HTML font 标签 中 color 属性 定义 的 带 有 颜色 的 字符 串 | 
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让 
续 表 
| 方 法 说 明 
| fontsize 返回 使 用 HTML font 标签 中 size 属性 定义 的 指定 尺寸 的 字符 串 
会 内 | italicsO) 返回 使 用 HTML i 标签 定义 的 斜体 字符 串 
A linkO 返回 使 用 HTML a 标签 定义 的 链接 
smallO | 返回 使 用 HTML small 标签 定义 的 小 字体 的 字符 串 
| strike0 | 返回 使 用 HTML strike 标签 定义 删除 线 样式 的 字符 串 
| sub0 | 返回 使 用 HTML sub 标签 定义 的 下 标 字符 串 


| 【 示例】 下面 示例 演示 了 如 何 使 用 上 面 字符 串 方法 为 字符 串 定义 格式 化 显示 属性 。 
| 
| vars="abcdef": 


document .write(s.boldO): / 定义 加 粗 显示 字符 串 "abcdef" 
document.write(s.link("http://www.mysite.cn/")): // 为 字符 串 "abcdef" 定 义 超 链接 ， 指 向 mysite.cn 域名 
document.write(s.italics()):; // 定义 斜体 显示 字符 串 "abcdef" 
document.write(s.fontcolor("red")): // 定义 字符 串 "abcdef" 红 色 显 示 


5.3.2 ”字符 编码 和 解码 
JavaScript 在 window 对 象 中 定义 了 6 个 编码 和 解码 的 方法 ， 说 明 如 表 5.4 所 示 。 
表 5.4 JavaScript 编码 和 解码 方法 


方 ” 法 说 明 
escape0 使 用 转 义 序列 蔡 换 某 些 字符 来 对 字符 串 进行 编码 
| Unescape( 对 使 用 escape0 编 码 的 字符 串 进行 解码 
| encodeURIO 通过 转 义 某 些 字符 对 URI1 进行 编码 
| decodeURI 对 使 用 encodeURIO 方 法 编码 的 字符 串 进行 解码 
encodeURIComponent() 通过 转 义 某 些 字符 对 URI 的 组 件 进行 编码 
decodeURIComponentO) 对 使 用 encodeURIComponent0 方 法 编码 的 字符 串 进行 解码 


从 提示 : 网 页 URL 的 合法 字符 分 成 两 类 。 
加 URE 元 字符 : 分 号 (;)、 运 号 (”,”) 、 斜 杠 (/) 、 问 号 (?)、 置 号 (:)、at(@)、 
用、 等 号 (=) 、 加 号 (+) 、 美 元 符号 ($) 、 井 号 (#) 。 
回 语义 字符 : a-z、A-Z、0-9、 连 词 符 (-) 、 下 画 线 (_) 、 点 (.) 、 感 叹 号 (1) 、 波 
浪 线 (~) 、 星 号 (* ) 、 单 引号 (') 、 圆 括号 (0 ) 。 
| 除了 以 上 字符 ， 其 他 字符 出 现在 URL 之 中 都 必须 转 义 ， 规 则 是 根据 操作 系统 的 默认 编码 ， 将 每 
| 个 字 节 转 为 百 分 号 (%) 加 上 两 个 大 写 的 十 六 进 制 字母 。 例 如 ，UTF-8 的 操作 系统 上 ， 
| “http:/www.example.com/q= 春 节 ” 这 个 URL 中 ， 汉 字 “ 春 节 ” 不 是 URL 的 合法 字符 ， 所 以 被 浏览 
”器 自动 转 成 “http://www.example.com/q=%E6%98%A5%E8%8A%82”。 其 中 ,“ 春 ” 转 成 %E6%98%A5， 
| “ 节 ” 转 成 “9%6E89%8A9%82”。 这 是 因为 “ 春 ” 和 “ 节 ” 的 UTF-8 编码 分 别 是 E6 98 A5 和 E8 8A 82， 
| 将 每 个 字 节 前 面 加 上 百 分 号 ， 就 构成 URL 编码 。 
| JavaScript 提供 4 个 URL 的 编码 /解码 方法 : encodeURI()、encodeURIComponent()、decodeURI() 
| 和 decodeURIComponentO0， 具 体 说 明 如 下 。 
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1. escape() 和 unescape() 方 法 
escapeO 是 不 完全 编码 的 方法 , 它 仅 能 将 字符 串 中 某 些 字符 蔡 换 为 十 六 进 制 的 转 义 序列 。 具体 说 ， 
就 是 除了 ASCII 字母 、 数 字 和 标点 符号 (如 @、*、_、+、-、. 和 ') 之 外 ， 所 有 字符 都 被 转换 为 %xx | 
或 %uxxxx (x 表示 十 六 进 制 的 数字 ) 的 转 义 序列 。 从 W0000 到 \u00 企 的 Unicode 字符 由 转 义 序列 %xx | 
蔡 代 ， 其 他 所 有 Unicode 字符 由 %uxxxx 序列 替代 。 | 
【示例 1】 下 面 代码 使 用 escape() 方 法 编码 字符 串 。 


alert(s); // 返回 字符 串 "javascript%u4E2D%u56FD" 
可 以 使 用 该 方法 对 Cookie 字符 串 进行 编码 ， 避 人 免 与 其 他 约定 字符 发 生 冲突 ， 因 为 Cookie 包含 的 
标点 符号 有 限制 。 
与 escape0 方 法 对 应 的 是 unescape0 方 法 ， 它 能 够 对 escape0 编 码 的 字符 串 解 码 。 该 函数 是 通过 找 | 
到 形式 为 %xx 和 %uxxxx 的 字符 序列 (这 里 x 表 示 十 六 进 制 的 数字 ), 使 用 Unicode 字符 wuOOxx 和 vuxxxx | 
蔡 换 这 样 的 字符 序列 进行 解码 。 | 
【示例 2】 下 面 代 码 使 用 unescape0 方 法 解码 被 escape0 方 法 编码 的 字符 串 。 | 
vars= "javascript 中 国 "; 


Ss = escape(s): // Unicode 编码 

alert(s); // 返回 字符 串 "javascript%u4E2D%u56FD" 
s = unescape(s); // Unicode 解码 

alert(s): // 返回 字符 串 "javascript 中 国 " 


【示例 3】 这 种 被 解码 的 代码 是 不 能 够 直接 运行 的 ， 读 者 可 以 使 用 eval0 方 法 来 执行 它 。 


vars=escape(alert("javascript 中 国 "):): 。“”// 编码 脚本 
var s = unescape(s); // 解码 脚本 
eval(s); / 执行 被 解码 的 脚本 


2. encodeURI() 和 decodeURI() 方 法 


虽然 ECMAScript 1.0 版 本 标准 化 了 escape0 和 unescape() 方 法 ， 但 是 ECMAScriptv 3.0 版 本 反对 
使 用 它们 ， 提 倡 使 用 encodeURIO 和 encodeURIComponent0 方 法 代 蔡 escape() 方 法 ， 使 用 decodeURIO 
和 decodeURIComponent() 方 法 代 蔡 unescape() 方 法 。 

【示例 4】encodeURIO 方 法 能 够 把 URI 字符 串 进行 转 义 处 理 。 

vars= "javascript 中 国 "; 

s= encodeURI(s): 

alert(s); // 返回 字符 串 "javascript96E4%B8%AD% E5%9B%BD" 

通过 结果 可 以 看 到 ，encodeURIO 方 法 与 escape0 方 法 编码 结果 不 同 。 但 是 ， 与 encode 
URIComponent0 方 法 相同 , 对 于 ASCII 的 字母 、 数 字 和 ASCI 标点 符号 (如 -、_、.、 ~ 、*、"、(、)) 
来 说 ， 也 不 会 被 编码 。 

相对 来 说 ，encodeURIO 方 法 会 更 加 安全 。 它 能 够 将 字符 转换 为 UTF-8 编码 字符 ， 然 后 用 十 六 进 | 
制 的 转 义 序列 (形式 为 %xx) 对 生成 的 一 个 、 两 个 或 三 个 字 节 的 字符 编码 。 在 这 种 编码 模式 中 , ASCI | 
字符 由 一 个 %xx 转 义 字符 替换 ， 在 0080 到 07ff 之 间 编 码 的 字符 由 两 个 转 义 序列 替换 ， 其 他 的 16 | 
位 Unicode 字符 由 3 个 转 义 序列 蔡 换 。 使 用 decodeURI(O 方 法 可 以 对 上 面 结果 进行 解码 操作 。 | 
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KS % 
【示例 3】 下 面 代码 演示 了 如 何 对 URL 字符 串 进 行 编码 和 解码 操作 。 
vars= "javascript 中 国 "; 
s = encodeURI(s): /1URI 编码 
alert(s); // 返回 字符 串 "javascript%E4%B8%AD% E5%9B%BD" 
s= decodeURI(s): /1URI 解码 
alert(s): // 返回 字符 串 " javascript 中 国 " 
在 ECMAScriptv 3 之 前 ， 可 以 使 用 escape0 和 unescape0 方 法 执行 相似 的 编码 解码 操作 。 
3. encodeURIComponent() 和 decodeURIComponent() 


encodeURIO 仅 是 一 种 简单 的 URI 字符 编码 方法 , 如果 使 用 该 方法 编码 URI 字符 串 , 必须 确保 URI 
组 件 〈 如 查询 字符 串 ) 中 不 含有 URI 分隔 符 。 如 果 组 件 中 含有 这 些 分 隔 符 ， 则 就 必须 使 用 
encodeURIComponent() 方 法 分 别 对 各 个 组 件 编码 。 

encodeURIComponent() 与 encodeURIO0 方 法 不 同 。 它 们 主要 区 别 就 在 于 ，encodeURIComponent0 方 法 
假定 参数 是 URI 的 一 部 分 ， 例如， 协议 、 主 机 名 、 路 径 或 查询 字符 串 。 因 此 ， 它 将 转 义 用 于 分 隔 URI 
各 个 部 分 的 标点 符号 。 而 encodeURIO 方 法 仅 把 它们 视 为 普通 的 ASCI 字符 ， 并 没有 转换 。 

【示例 6】 下 面 代码 是 URL 字符 串 被 encodeURIComponent0 方 法 编码 前 后 的 比较 。 

Var s = "http:// www.mysite.cn/navi/search.asp?keyword=URI"; 

a = encodeURI(s); 

document.write(a): 

document.write("<br />"); 

b = encodeURIComponent(s): 

document.write(b); 

输出 显示 如 下 。 

http:// www.mysite.cn/navi/search.asp?keyword=URI 

http%3A%2F%2Fwww.mysite.cn%2Fnavi%2Fsearch.asp%3Fkeyword%3DURI 

第 一 行 字 符 串 是 encodeURIO 方 法 编码 的 结果 ， 而 第 二 行 字符 串 是 encodeURIComponent0 方 法 纺 
码 的 结果 。 同 encodeURI( 方 法 一 样 ，encodeURIComponent() 方 法 对 于 ASCII 的 字母 、 数 字 和 部 分 标 
点 符号 (如 -、_、.、!、~ 、*、"、(、)) 不 编码 。 而 对 于 其 他 字符 (如 /、:、#) 这 样 用 于 分 隔 URI 
各 种 组 件 的 标点 符号 ， 都 由 一 个 或 多 个 十 六 进 制 的 转 义 序列 蔡 换 。 

【示例 7】 对 于 encodeURIComponent0 方 法 编码 的 结果 进行 解码 ， 可 以 使 用 decodeURI 


| Component() 方 法 来 快速 实现 。 


Vars= "http:// www.mysite.cn/navi/search.asp?keyword=URI": 
b=encodeURIComponent(s): 

b= decodeURIComponent(b) 

document write(b): 


533 Unicode 编码 和 解码 


所 谓 Unicode 编码 就 是 根据 字符 在 Unicode 字符 表 中 的 编号 对 字符 进行 简单 的 编码 ， 从 而 实现 对 
信息 进行 加 密 。 例 如 ， 字 符 “ 中 ”的 Unicode 编码 为 20013， 如 果 在 网 页 中 使 用 Unicode 编码 显示 ， 
则 可 以 输入 “&#20013;”。 因 此， 把 文本 转换 为 Unicode 编码 之 后 在 网 页 中 显示 ， 能 够 实现 加 密 信息 
的 效果 。 
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String 类 型 提供 了 预定 charCodeAt0 方 法 ， 该 方法 能 够 把 指定 的 字符 串 转换 为 Unicode 编码 。 所 
以 ， 该 方法 的 设计 思路 是 ， 利 用 replace() 方 法 逐个 字符 进行 匹配 、 编 码 转换 ， 最 后 返回 以 网 页 显示 的 
编码 格式 的 信息 。 
【示例 1】 下 面 代码 利用 字符 串 的 charCodeAt0 方 法 对 字符 串 进行 自 定义 编码 。 
var toUnicode = String prototype.toUnicode = finctionO { 对 字符 囊 进 行 编码 方法 | 
Var _this = arguments[0] || this; // 判断 是 否 存在 参数 ， 如 果 存 在 则 使 用 静态 方法 调用 参数 值 ， 否 则 作为 字 
// 符 串 对 象 的 方法 来 处 理 当 前 字符 串 对 象 | 
function fo { // 定义 替换 文本 函数 
Tetum "&#" + arguments[0].charCodeAt(0) + ":":// 以 网 页 编码 格式 显示 被 编码 字符 串 


} | 
Teturn_this.replace(/[^u00-\uFF]I\w/gmi, 9: // 使 用 replace 方法 执行 匹配 、 蔡 换 操作 | 

E | 
简单 说 明 一 下 ，toUnicode0 是 一 个 全 局 静态 方法 ， 同 时 也 是 一 个 String 类 型 的 方法 ， 为 此 在 函数 | 
体内 首先 判断 方法 的 参数 值 ， 以 决定 执行 操作 的 方式 。 在 replace0 字 符 蔡 换 方法 中 ， 借 助 文本 蔡 换 函 | 
数 来 完成 被 匹配 字符 的 转 码 操作 ， 如 下 所 示 。 | 
| 


vars= "javascript 中 国 "; // 定义 字符 串 直 接 量 
S=toUnicode(s): // 以 静态 方式 调用 toUnicode0 方 法 
alert(s): // 返回 Unicode 编码 字符 串 


ll “RH#106:RH97:&#118:&H#97:&c#115:&c#f99:&c#114: 
// R#10S:&#112:&#116:&#20013:&#22269:” 
document write(s); / 在 网 页 中 显示 字符 串 为 “javascript 中 国 ” 


以 String 类 型 方法 调用 的 形式 如 下 。 
vars= "javascript 中 国 "; 
s= $s.toUnicode(): / 以 String 类 型 的 方法 调用 toUnicode0 方 法 
alert(s):; 
document.write(s); 


与 Unicode 编码 操作 相对 应 ， 可 以 设计 Unicode 解码 方法 ， 设 计 思路 和 代码 实现 基本 相同 。 
【示例 2】 下 面 代码 使 用 字符 串 的 charCodeAt0 方 法 定义 一 个 字符 串 解 码 函 数 。 


var fromUnicode = String.prototype.fromUnicode = fonction0 {// 对 Unicode 编码 进行 解码 操作 | 
var _this = arguments[0] || this; // 判断 是 否 存在 参数 ， 如 果 存 在 则 使 用 静态 方法 调用 参数 值 ， 否 则 作为 字 | 
// 符 串 对 象 的 方法 来 处 理 当 前 字符 串 对 象 
function fo { // 定义 替换 文本 函数 
Tetum String.fromCharCode(arguments[1]): 
/ 把 第 一 个 子 表达 式 值 (Unicode 编码 ) 转换 为 字符 


} 
return_this.replace(/&#(\d*):/gmi, D: // 使 用 replace0 匹 配 并 蔡 换 Unicode 编码 为 字符 


上 
关于 Unicode 编码 和 解码 操作 ， 应 该 注意 正则 表达 式 的 设计 ， 对 于 ASCI 字符 来 说 ， 其 Unicode 
编码 在 u00 一 FF (十 六 进 制 );， 而 对 于 双 字 节 的 汉字 来 说 ， 则 应 该 是 大 于 \uFF 编码 的 字符 集 ， 因 此 
在 判断 时 要 考虑 到 不 同 的 字符 集合 。 
【示例 3】 利 用 上 面 定义 的 方法 尝试 把 被 toUnicode0 方 法 编码 的 字符 进行 解码 。 
vars= "javascript 中 国 ": // 定义 字符 串 直接 量 
s=s.toUnicode(): / 对 字符 串 进行 Unicode 编码 
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alert(s): / 返回 字符 串 
// “&#106:&H97T:&#118:&c#97:&#115:&H99:&#114 
// :#105:&H#112:&#116:&c#20013:&#22269:? 

> s= $s.fromUnicodeO: // 对 被 编码 的 字符 串 进行 解码 

食 和 | alert(S): // 返回 字符 串 “javascript 中 国 ” 


5.3.4 ”字符 串 智 能 替换 
国 | 回 ， 


ECMAScript 3.0 规定 replace( 方 法 的 第 二 个 参数 建议 使 用 函数 ， 而 不 是 字符 串 。 当 使 用 replace0 
方法 执行 匹配 时 ， 每 次 匹配 时 都 会 调用 该 函数 ， 函 数 的 返回 值 将 作为 蔡 换文 本 执行 匹配 操作 ， 同 时 函 
数 可 以 接收 以 8 为 前 缀 的 特殊 字符 组 合 ， 用 来 对 匹配 文本 的 相关 信息 进行 引用 。 

【示例 1】 下 面 代码 使 用 蔡 换 函 数 把 字符 串 中 每 个 单词 转换 为 首 字母 大 写 形式 显示 。 
| var s = 'script language = "javascript" type= " text / javascript": ” // 定义 字符 串 
| varf= function($1) { // 定义 蔡 换文 本 函数 ， 参 数 为 第 一 个 子 表达 式 匹 配 文本 
retum $1.substring(0, 1)toUpperCaseO + $1.substring(1): 

/ 把 匹配 文本 的 首 字母 转换 为 大 写 


| 
| 
| ce // 匹配 文本 并 进行 替换 

alert(a); // 返回 字符 串 Script Language = "Javascript" Type = "Text /Javascript" 

上 面 示例 ， 函 数 人 0 的 参数 为 特殊 字符 “$1”， 它 表示 正则 表达 式 /(bww+\b)/ 中 小 括号 每 次 匹配 的 文 
本 。 然 后 在 函数 结构 内 对 这 个 匹配 文本 进行 处 理 ， 截 取 其 首 字母 并 转换 为 大 写 形式 ， 然 后 返回 新 处 理 
的 字符 串 。replace0 方 法 能 够 在 原文 本 中 使 用 这 个 返回 的 新 字符 串 普 换 掉 每 次 匹配 的 子 字符 串 。 
| 【示例 2】 对 于 上 面 示例 ， 还 可 以 进一步 延伸 ， 使 用 小 括号 以 获取 更 多 匹配 文本 的 信息 。 例 如 ， 
| 直接 利用 小 括号 传递 单词 的 首 字母 ， 然 后 进行 大 小 写 转换 处 理 。 


| 
| Var s = 'script language = "javascript" type = " text /javascript": 
| 
| 


varf= function($1.$2.$3) { // 定义 替换 文本 函数 ， 请 注意 参数 的 变化 
Tetum $2.toUpperCase()+$3 : // 返回 字符 串 Script Language = "Javascript" Type = 


» 
var a= s.replace(\b(\w)(\w*)\b/g, f):  //" Text /Javascript" 


在 函数 人 中 ， 第 一 个 参数 表示 每 次 匹配 的 文本 ， 第 二 个 参数 表示 第 一 个 小 括号 的 子 表达 式 所 匹 
配 的 文本 ， 即 单词 的 首 字母 ， 第 二 个 参数 表示 第 二 个 小 括号 的 子 表 达 式 所 匹配 的 文本 。 

实际 上 ，replace() 方 法 的 第 二 个 参数 是 一 个 函数 ，replace() 方 法 依然 会 给 它 传 递 多 个 实 参 ， 这 些 实 
参 都 包含 一 定 的 意思 ， 具 体 说 明 如 下 。 

第 一 个 参数 表示 匹配 模式 相 匹配 的 文本 ， 如 上 面 示例 中 每 次 匹配 的 单词 字符 串 。 

其 后 的 参数 是 匹配 模式 中 子 表达 式 相 匹配 的 字符 串 ， 参 数 个 数 不 限 ， 根 据 子 表达 式 数 而 定 。 

后 面 的 参数 是 一 个 整数 ， 表 示 匹 配 文本 在 字符 串 中 的 下 标 位 置 。 

最 后 一 个 参数 表示 字符 串 自身 。 

【示例 3】 把 上 面 示例 中 替换 文本 函数 改 为 如 下 形式 。 

var f= fonction0 { 

Tetum arguments[1].toUpperCaseO+arguments[2]: 


| 最 
| 也 就 是 说 ， 如 果 不 为 函数 传递 形 参 ， 直 接 调 用 函数 的 arguments 属性 ， 同 样 能 够 读 取 到 正则 表达 
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式 中 相关 匹配 文本 的 信息 。 其 中 : 

arguments[0] 表 示 每 次 匹配 的 单词 。 
arguments[1] 表 示 第 一 个 子 表达 式 匹配 的 文本 ， 即 单词 的 首 个 字母 。 | 
arguments[2] 表 示 第 二 个 子 表 达 式 匹配 的 文本 ， 即 单词 的 余下 字母 。 | 全 内 
arguments[3] 表 示 匹 配 文本 的 下 标 位 置 ， 如 第 一 个 匹配 单词 script 的 下 标 位 置 就 是 0， 以 此 | 一 一 
类 推 。 

arguments[4] 表 示 要 执行 匹配 的 字符 串 ， 这 里 表示 “script language = "javascript" type= " text / | 


图 图 罗 网 


加 


javascript"”。 | 
【示例 4】 下 面 代码 利用 函数 的 arguments 对 象 主动 获取 replace() 方 法 第 一 个 参数 中 正则 表达 式 | 
所 匹配 的 详细 信息 。 | 
Var s = 'script language = "javascript" type= " text / javascript"; | 
varf= fanction0{ 

for (var i= 0; i < arguments.length; i++) { 
alert(" 第 " + (i+ 1) + "个 参数 的 值 : "+ arguments[i]): | 
人 | 
Var a= s.replace(\b(\Ww)(\w*)\b/g. D): 


在 函数 结构 体 中 ,使 用 for 循环 结构 遍历 argumnets 属性 时 ， 则 发 现 每 次 匹配 单词 时 ， 都 会 弹出 5 
次 提示 信息 ， 分 别 显示 上 面 所 列 的 匹配 文本 信息 。 其 中 ，arguments[1]、arguments[2] 会 根据 每 次 匹配 
文本 不 同 ， 分 别 显示 当前 匹配 文本 中 子 表达 式 匹 配 的 信息 ，arguments[3] 显 示 当 前 匹配 单词 的 下 标 位 
置 。 而 arguments[0] 总 是 显示 每 次 匹配 的 单词 ，arguments[4] 总 是 显示 被 操作 的 字符 串 。 | 
【示例 3】 下面 代码 能 够 自动 提取 字符 串 中 的 分 数 ， 并 汇总 、 算 出 平均 分 。 然 后 利用 replace( 方 | 
法 提取 每 个 分 值 ， 与 平均 分 进行 比较 以 决定 蔡 换 文本 的 具体 信息 。 | 
vars=" 张 三 56 分 ， 李 四 74 分 ， 王 五 92 分 ， 赵 六 84 分 "，// 定义 字符 串 直接 量 | 


var a= s.match(N\d+/g), sum = 0: / 匹配 出 所 有 分 值 ， 输 出 为 数组 | 
for (vari=0 :i<alength: it+) { // 遍历 数组 ， 求 总 分 | 

sum += parseFloat(a[i]): // 把 元 素 值 转换 为 数值 后 递 加 | 
六 | 
var avg = sumy/alength: // 求 平均 分 | 
function fO { | 


var n = parseFloat(arguments[1]): 
/ 把 匹配 的 分 数 转换 为 数值 ， 第 一 个 子 表达 式 
Ietumn+ "分 "+"("+(n> avg) ?(" 超 出 平均 分 "+ (n -avg)) : (" 低 于 平均 分 "+ (avg - D))+ "分 ) ": | 
// 设计 普 换 文本 的 内 容 | 
bp 
var sl = sTeplace(/(d+) 分 /g, f): / 执行 匹配 、 蔡 换 操作 
alert(s1): 
/ 返回 字符 串 “ 张 三 56 分 〈 低 于 平均 分 20.5 分 )， 李 四 74 分 〈 低 于 平均 分 2.5 分 
/ 王 五 92 分 (超出 平均 分 15.5 分 )， 赵 六 84 分 (超出 平均 分 5.5 分 )” 


在 上 面 的 示例 中 ， 应 注意 两 个 细节 。 

第 一 ,遍历 数组 时 不 能 够 使 用 for-in 结构 ,因为 在 这 个 数组 中 还 存储 有 其 他 相关 的 匹配 文本 信息 。 
应 该 使 用 for 结构 来 实现 。 

第 二 ， 由 于 截取 的 数字 都 是 字符 串 类 型 ， 应 该 把 它们 都 转换 为 数值 类 型 ， 否 则 会 被 误解 ， 如 把 数 
字 连 接 在 一 起 ， 或 者 按 字母 顺序 进行 比较 等 。 
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| 5.3.5 “过滤 敏感 词 


i 各 特殊 字符 检测 和 过 滤 是 字符 串 操 作 中 的 常见 任务 。 可 以 为 Sting 类 型 扩展 一 个 方法 checkO， 用 
铬 | ”来 检测 字符 叫 中 是 否 包含 指定 的 特殊 字符 。 

。 ”设计 思路 ， 方法 check0 的 参数 为 任意 长 度 和 个 数 的 特殊 字符 列表 ， 检 测 的 返回 结果 为 布尔 值 。 
如 果 检测 到 任意 指定 的 特殊 字符 ， 则 返回 tue， 理 则 返回 blse。 

| 【示例 】 下 面 为 字符 串 扩展 一 个 原型 方法 checkO， 它 能 够 根据 参数 检测 字符 串 中 是 否 存在 特定 
«String protoype check = finctionO { /1 特殊 字符 检测 ， 参 数 为 特殊 字符 列表 
// 返回 me 表示 存在 ， 否 则 不 存在 
| 
| 


过 (arguments.length < 1) throw new Error(" 缺 少 参数 "):// 如 果 没 有 参数 ， 则 抛 出 异常 
vara=[]，this = this; // 定义 空 数组 ， 并 把 检测 的 字符 串 存储 在 局 部 变量 中 
for(vari=0:i< argumentslength: it+) { ”// 遍历 参数 ， 把 参数 列表 转换 为 数组 
a.push(arguments[i]): // 把 每 个 参数 值 推 入 数组 


} 
vari=-1: // 设置 临时 变量 ， 初 始 化 为 -1 
aeach(function0{ ”// 调用 数组 的 扩展 方法 each0， 实 现 迭 代数 组 
// 并 为 每 个 元 素 调用 匿名 函数 ， 来 检测 字符 串 中 是 否 存在 指定 的 特殊 字符 


ifG =- 1) retum true; // 如 果 临 时 变量 不 等 于 - 1， 则 提前 返回 true 
| i=_this.search(this) // 否 则 把 检索 到 的 字符 串 下 标 位 置 传 递 
| 让 
| ifG 一 -D{ // 如 果 i 等 于 - 1， 则 返回 false， 说 明 没有 检测 到 特殊 字符 
Teturn false: 
Jelse { // 如 果 i 不 等 于 - 1， 则 返回 tme， 说 明 检测 到 特殊 字符 
Tetum trne: 


| 在 该 特殊 字符 检测 的 扩展 方法 中 ， 使 用 了 Array 对 象 扩展 的 each0 方 法 ， 该 方法 能 够 迭代 数组 。 
| 下面 应 用 String 类 型 的 扩展 方法 check0， 来 检测 字符 串 中 是 否 包含 特殊 字符 尖 角 号 ， 以 判断 字符 串 
| 中 是 否 存在 HIML 标签 。 
| Var s = '<script language="javascript" type="text/javascript">"; 
| / 定义 字符 串 直接 量 
varb=s.check("<", ">");  // 调用 String 类 型 的 扩展 方法 ， 检 测字 符 串 
| alert(b): // 返回 tmue， 说 明 存在 特殊 的 字符 "<" 或 ">"， 即 存在 标签 
由 于 Array 对 象 的 扩展 方法 eachO 能 够 多 层 和 迭代 数组 。 所 以 , 还 可 以 以 数组 的 形式 传递 参数 。 例 如 : 
| Var s='<script language="javascript" type="text/javascript">"; 
var a = [cn ">" Nm me Ve NT]: 
Varb = s.check(a); 
alert(b): 


把 特殊 字符 存储 在 数组 中 ， 这 样 更 方便 管理 和 引用 。 
5.3.6 ”高 级 加 密 解 密 
加 密 和 解密 的 关键 是 算法 设计 ,通俗 地 说 就 是 设计 一 个 函数 式 , 输入 字符 串 之 后 ,经 过 复杂 的 函 
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数 处 理 ， 返 回 一 组 看 似 杂乱 无 章 的 字符 串 。 对 于 常人 来 说 ， 输 入 的 字符 串 是 可 以 阅读 的 信息 ， 但 是 被 | 
函数 打 乱 或 编码 之 后 显示 的 字符 串 就 变 成 无 意义 的 垃圾 信息 。 要 想 把 这 些 垃圾 信息 变 为 有 意义 的 信息 ， | 
还 需要 使 用 相反 的 算法 把 它们 逆转 回来 。 | 
【 示例】 假设 把 字符 串 “ 中 ”进行 自 定 义 加 密 。 可 以 考虑 利用 JavaScript 预定 义 的 charCodeAtO | 全 
方法 获取 该 字符 的 Unicode 编码 。 | 


二 ete 


Var b= scharCodeAt(0): / 返回 值 20013 | 
然后 以 36 为 倍数 不 断 取 余 数 : | 
bl =b % 36: / 返回 值 33， 求 余数 | 
b=@-bD136: / 返回 值 555， 求 倍数 | 
b2 =b % 36: / 返回 值 15， 求 余数 | 
b=(b—b2)/36:; // 返回 值 15， 求 倍数 

b3 =b % 36: / 返回 值 15， 求 余数 


那么 不 断 求 得 的 余数 ， 可 以 通过 下 面 公 式 反 算 出 原 编码 值 。 
m=b3*36*36+b2*36+bl; ”// 返回 值 20013， 反 求 字 符 “ 中 ”的 编码 值 

有 了 这 种 算法 ， 就 可 以 实现 字符 与 加 密 数 值 之 间 的 相互 转换 。 如 果 定 义 一 个 密 匙 如 下 所 示 。 

Var key = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ": 

把 余数 定位 到 密 匙 中 某 个 下 标 值 相等 的 字符 上 ， 这样 就 实现 了 加 密 效 果 。 反 过 来 ， 如 果 知道 某 个 
字符 在 密 匙 中 的 下 标 值 ， 然 后 反 算出 被 加 密 字符 的 Unicode 编码 值 ， 最 后 就 可 以 逆 推 出 被 加 密 字符 的 | 
原 信息 。 | 

我 们 设 定 密 匙 是 以 36 个 不 同 的 数值 和 字母 组 成 的 字符 串 。 不 同 密 匙 ， 加 密 解 密 的 结果 则 不 同 ， 
加 密 结果 以 密 是 中 的 字符 作为 基本 元 素 。 | 
具体 加 密 字符 串 方法 如 下 。 
vartoCode= function(str) { // 加 密 字 符 串 


// 定义 密 钥 ，36 个 字母 和 数字 
var key = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ": 


var | = keylength: / 获取 密 钥 的 长 度 
var a = key.split(™"): / 把 密 钥 字符 串 转换 为 字符 数组 
Var s="",b. bl, b2. b3:; // 定义 临时 变量 


for (vari= 0:i< strlength: it+) { // 遍历 字符 串 
b=str.charCodeAt(i); / 逐个 提取 每 个 字符 ， 并 获取 Unicode 编码 值 


bl=b%1: // 求 Unicode 编码 值 的 余数 
b=@-bD/L // 求 最 大 倍数 | 
b2=b%!1: / 求 最 大 倍数 的 余数 | 
b=b-b2)/L // 求 最 大 倍数 | 
b3=b%1: // 求 最 大 倍数 的 余数 | 
s+=a[b3]+a[b2]+a[bl]: ”// 根据 这 些 余 数值 映射 到 密 钥 中 对 应 下 标 值 的 字符 | 
} | 
Tetum s: // 返回 这 些 映射 的 字符 | 
} | 
| 
解密 字符 串 的 方法 如 下 。 | 
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Var fromCode = function(str) { // 解密 toCode0 方 法 加 密 的 字符 串 
// 定义 密 钥 ，36 个 字母 和 数字 
Var key = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ": 
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var1=keylength: / 获取 密 钥 的 长 度 

var b.b1.b2.b3,d=0,s: // 定义 临时 变量 

s=new Array(Math.floor(strlength / 3)) / 计算 加 密 字符 串 包含 的 字符 数 ， 并 定义 数组 

b= slength: // 获取 数组 的 长 度 
| for (vari=0;i<b:;irt) { / 以 数组 的 长 度 为 循环 次 数 ， 遍 历 加 密 字符 串 
| bl =keyindexOfstrcharAt(d) 。“”// 截取 周期 内 第 一 个 字符 ， 计 算 在 密 钥 中 的 下 标 值 
| dit; 
| b2 =keyindexOfstrcharAt(D) 。“// 截取 周期 内 第 二 个 字符 ， 计 算 在 密 钥 中 的 下 标 值 
| dt+; 
| b3 = keyindexOfstr.charAt(d)) 。 / 截取 周期 内 第 三 个 字符 ， 计 算 在 密 钥 中 的 下 标 值 
| dt+t; 
| s 国 =bl*1*1+b2*1+b3 / 利用 下 标 值 ， 反 算 加 密 字符 的 Unicode 编码 值 
} 
| b 二 eval("String.fromCharCode(" + sjoin(,")+")"): // 计算 对 应 的 字符 串 
| retum b: / 返回 被 解密 的 字符 串 
| } 
| 
| 最 后 ， 利 用 上 面 自 定义 的 加 密 和 解密 方法 来 进行 试验 ， 如 下 所 示 。 

vars= "javascript 中 国 "; // 字符 串 直接 量 
| s =toCode(s); / 加 密 字符 串 
| alert(s): // 返回 字符 串 "02Y02P03A02P03702R03602X034038FFXH6L" 
| s =fromCode(s); / 解密 被 加 密 的 字符 串 
alert(s); / 返回 字符 串 "javascript 中 国 " 
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第 8 章 
使 用 正则 表达 式 


正则 表达 式 (Regular Expression ) 是 一 种 表达 文本 模式 ( 即 字符 囊 结构 ) 的 方法 ， 有 点 
像 字符 囊 的 模板 ,常常 用 作 按 照 “ 给 定 模式 ”匹配 文本 的 工具 。 如 正则 表达 式 给 出 一 个 Email 
地 址 的 模式 ， 然 后 用 它 来 确定 一 个 字符 事 是 否 为 Email 地 址 。JavaScript 的 正则 表达 式 体系 


是 参照 Perl 5 建立 的 


【 学 习 重 点 】 

WI 定义 正则 表达 式 

就 悉 正 则 表达 式 的 匹配 规则 
使 用 RegExp 对 象 

灵活 使 用 正则 表达 式 处 理 字 符 囊 。 


于 瑟瑟 


/saitt 网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版 ) 


6.1 新 建 正则 表达 式 


| 新 建 正则 表达 式 有 两 种 方法 : 一 种 是 使 用 直接 量 , 以 斜 杠 表示 开始 和 结束 ; 另 一 种 是 使 用 RegExpO 


6.1.1 构造 正则 表达 式 


RegExpO 构 造 函 数 可 以 新 建 正则 表达 式 对象 ， 用 法 如 下 。 
new RegExp(pattern, attributes) 


| 参数 pattern 可 以 是 一 个 字符 串 ， 指 定 正则 表达 式 的 匹配 模式 ， 也 可 以 是 一 个 正则 表达 式 ， 参 数 
| attributes 是 一 个 可 选 的 修饰 符 ， 包 含 "g"、"i 和 "m"， 分 别 用 于 指定 全 局 匹配 、 区 分 大 小 写 的 匹配 和 多 
行 匹配 。 如 果 pattern 是 正则 表达 式 ， 而 不 是 字符 串 ， 则 必须 省 略 该 参数 。 

该 函数 将 返回 一 个 新 的 RegExp 对 象 ， 具 有 指定 的 模式 和 修饰 符 。 
| 【示例 1】 下 面 示例 使 用 RegExp0 构 造 函 数 定义 了 一 个 简单 的 正则 表达 式 ， 匹 配 模式 为 字符 "a"， 
| 没有 设置 第 二 个 参数 ， 所 以 这 个 正则 表达 式 只 能 够 匹配 字符 串 中 第 一 个 小 写字 母 a， 后 面 的 字母 将 


| 无 法 被 匹配 到 。 
| varr = new RegExp("a"); // 构造 最 简单 的 正则 表达 式 
| vars= "javascript!=JAVA"; / 定义 字符 串 直 接 量 
var a = smatch(D: // 调用 正则 表达 式 执行 匹配 操作 ， 返 回 匹配 的 数组 
| alert(a): // 返回 数组 ["a"] 
| alert(a.index); // 返回 值 为 1 
【示例 2】 如 果 希 望 匹 配 字符 串 中 所 有 的 字母 a， 且 不 区 分 大 小 写 ， 则 可 以 在 第 二 个 参数 中 增加 
| g 和 i 修饰 词 。 
(varr=new RegExp("a"."gi"): // 设置 匹配 模式 为 全 局 匹配 ， 且 不 区 分 大 小 写 
| vars= "javascript!=JAVA"; // 字符 串 直接 量 
| var a = smatch(D: / 匹配 查找 
alert(a); / 返回 数组 ["a"."a"."A"."A"] 


【示例 3】 在 正则 表达 式 中 可 以 使 用 特殊 字符 。 下 面 示例 的 正则 表达 式 将 匹配 字符 串 "javascript 
JAVA" 中 每 个 单词 的 首 字母 。 
Varr =new RegExp("\b\w"."gi"): // 构造 正则 表达 式 对 象 


var s = "javascript JAVA": // 字符 串 直接 量 
vara=s.match(D: / 匹配 查找 
alert(a); / 返回 数组 ["j". "J"] 


在 上 面 示例 中 , 字符 串 "NbNw" 表 示 一 个 匹配 模式 , 其 中 "\b" 表 示 单词 的 边界 , "ww" 表示 任意 ASCII 
| 字符 。 反 斜 杠 表示 转 义 序列 ， 为 了 避免 Regular0 构 造 函 数 的 误解 必须 使 用 “\” 替换 所 有 “\” 字符 ， 
| 使 用 双 反 斜 杠 表示 斜 杠 本 身 的 意思 。 
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这 提示 : 在 脚本 中 动态 创建 正则 表达 式 时 ， 使 用 RegExp() 构 造 函 数 会 更 方便 。 例如， 如 果 检 索 的 
字符 串 是 由 用 户 输入 的 ， 那 么 就 必须 在 运行 时 使 用 RegExp() 构 造 函 数 来 创建 正则 表达 式 ， 

而 不 能 使 用 其 他 方法 。 | 

【示例 4】 如 果 RegExp0 构 造 函数 的 第 一 个 参数 是 一 个 正则 表达 式 ， 则 第 二 个 参数 可 以 省 略 。 这 | 

时 RegExpO 构 造 函数 将 创建 一 个 参数 相同 的 正则 表达 式 对 象 。 | 


Varr =new RegExp("\b\w"."gi"): // 构造 正则 表达 式 对 象 

varrl =newRegExp(D: / 把 正则 表达 式 变量 作为 参数 传递 给 RegExp0 构 造 函 数 

Var s = "javascript JAVA": // 字符 串 直接 量 

vara=sImatch(D: / 匹配 查找 | 

alert(a): / 返回 数组 ["j", "7"] | 
| 


疱 提示 : 把 正则 表达 式 直接 量 传递 给 RegExp(0 构 造 函 数 ， 可 以 进行 类 型 封装 。 

【示例 5】RegExp0 也 可 以 作为 普通 函数 使 用 ， 这 时 它 与 使 用 new 运算 符 调用 构造 函数 功能 相 
同 ,用 来 强制 转换 参数 值 为 正则 表达 式 。 不 过 如 果 函数 的 参数 是 正则 表达 式 ， 那么 它 仅 返回 正则 表达 
式 ， 而 不 再 创建 一 个 新 的 RegExp 对 象 。 


var a = new RegExp("\b\w","gi"): // 构造 正则 表达 式 对 象 | 
varb = new RegExp(a); / 对 正则 表达 式 对 象 进行 再 封装 | 
Var c= RegExp(a); // 返回 正则 表达 式 直接 量 | 
alert(a.constructor 一 RegExp): // 返回 tme | 
alert(b.constructor 一 RegExp): / 返回 tme ! 
alert(c.constructor — RegExp): // 返回 tme | 


6.1.2 正则 表达 式 直 接 量 


正则 表达 式 直 接 量 使 用 斜 杠 作为 分 隔 符 进行 定义 , 两 个 斜 杠 之 间 包 含 的 字符 为 正则 表达 式 的 字符 
模式 ， 字 符 模式 不 能 使 用 引号 ， 修 饰 字符 放 在 最 后 一 个 斜 杠 的 后 面 ， 语 法 如 下 。 


/pattern/attributes 

【示例 1】 下 面 示例 定义 一 个 正则 表达 式 直 接 量 ， 然 后 进行 调用 。 | 
var rt = /\b\w/gi; | 
Var s = "javascript JAVA": | 
var a = smatch(D: // 直接 调用 正则 表达 式 直接 量 | 
alert(a): / 返回 数组 ["j". "7"] | 


次 提示 :在 RegExp0 构 造 函 数 与 正则 表达 式 直接 量 语法 中 , 匹配 模式 的 表示 是 不 同 的 .对 于 RegExp0 | 
构造 函数 来 说 , 它 接 收 的 是 字符 串 , 而 不 是 正则 表达 式 的 匹配 模式 . 所 以 ,在 上 面 示例 中 ， 
RegExp() 构 造 函 数 中 第 一 个 参数 中 的 特殊 字符 必须 使 用 双 反 儿 杠 来 表示 ， 以 防止 字符 串 中 
每 个 字符 被 RegExp0 构 造 函 数 转 义 . 同时 对 于 第 二 个 参数 中 的 修饰 词 也 应 该 使 用 引号 来 包 
含 . 而 正则 表达 式 直接 量 中 ， 每 个 字符 都 按 正 则 表达 式 的 规则 来 定义 ， 普 通 字符 与 特殊 字 
符 都 会 被 正确 解释 . 


【示例 2】 在 RegExp0 构 造 函 数 中 可 以 传递 变量 ， 而 在 正则 表达 式 直接 量 中 是 不 允许 的 。 
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VarT=DewRegExp("a"+s+"b"."g"): /动态 创建 正则 表达 式 

Varr=/"a"+ s+"b"/g:; // 错误 的 用 法 

在 上 面 示例 中 ， 对 于 正则 表达 式 直接 量 来 说 ,“"” 和 “+” 都 将 被 视 为 普通 字符 而 进行 匹配 ， 而 
不 是 作为 字符 与 变量 的 语法 标识 符 进行 连接 操作 。 


6.2 匹配 规则 基础 


正则 表达 式 对 字符 串 的 匹配 有 很 复杂 的 规则 ， 下 面 一 一 介绍 这 些 规则 。 
6.2.1 字面 量 字符 和 元 字符 


大 部 分 字符 在 正则 表达 式 中 ， 就 是 字面 的 含义 ， 例 如 ，/a/ 匹 配 a，/b/ 匹 配 b。 如 果 在 正则 表达 式 
中 ， 某 个 字符 只 表示 它 字 面 的 含义 ， 那 么 就 叫 “ 字 面 量 字符 ”。 例 如 : 

/dog/ .test("old dog") // tue 

在 上 面 代码 中 , 正则 表达 式 的 dog, 就 是 字面 量 字符 , 所 以 /dog/ 匹 配 “old dog”, 因为 它 就 表示 d、 
o、g 这 3 个 字母 连 在 一 起 。 

除了 字面 量 字符 以 外 ， 还 有 一 部 分 字符 有 特殊 含义 ， 不 代表 字面 的 意思 ， 叫 作 “ 元 字符 ”， 主 要 
有 以 下 几 个 。 

1. 点 字符 

点 字符 〈.) 匹配 除 回 车 (rt)、 换 行 (n) 、 行 分 隔 符 〈\vu2028) 和 段 分 隔 符 〈\u2029) 以 外 的 所 有 
字符 。 例 如 : 

lct/ 


在 上 面 代码 中 , ct 匹配 和 t 之 间 包 含 任意 一 个 字符 的 情况 , 只 要 这 3 个 字符 在 同一 行 , 如 cat、 
c2t、c-t 等 ， 但 是 不 匹配 coot。 

2. 位 置 符 

位 置 字符 用 来 提示 字符 所 处 的 位 置 ， 主 要 有 两 个 字符 。 

回 “^: 表示 字符 串 的 开始 位 置 。 

$: 表示 字符 串 的 结束 位 置 。 

例如 : 

// test 必须 出 现在 开始 位 置 

/Mtest/.test('test123") // true 

// test 必须 出 现在 结束 位 置 

/test$/: ll tme 

// 从 开始 位 置 到 结束 位 置 只 有 test 

/Mtest$/.testC'test') // true 

/Mtest$/ .test('test test’) // false 


3. 选择 符 
竖 线 符号 〈|) 在 正则 表达 式 中 表示 “或 ”(OR)， 如 catldog 表示 匹配 cat 或 dog。 
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/11P2/test(911)W true 
在 上 面 代码 中 ， 正 则 表达 式 指定 必须 匹配 11 或 22。 
【示例 】 多 个 选择 符 可 以 联合 使 用 。 
/ 匹配 fred、bamey、betty 中 的 一 个 
/fredlbarneylbetty/ 
选择 符 会 包括 它 前 后 的 多 个 字符 ， 如 /abled/ 指 的 是 匹配 ab 或 者 ed， 而 不 是 指 匹 配 b 或 者 ce。 如 果 | 
想 修改 这 个 行为 ， 可 以 使 用 小 括号 。 | 
/a(Db/test(avtb) // true | 
上 面 代 码 指 的 是 ，a 和 b 之 间 有 一 个 空格 或 者 一 个 制 表 符 。 | 
【示例 1】 可 以 设计 多 重 选择 模式 ， 这 时 只 需要 在 多 个 子 模式 之 间 加 入 选择 操作 符 即 可 ， 执 行 连 | 
续 选 择 匹 配 操作 。 | 


Varsl = "abe"; | 
Var S2 = "efg"; | 
Var s3 ="123"; | 
Var s4 ="456"; | 
varr=/(abcjl(efe)l(123)(456)/: // 多 重 选择 匹配 | 
var bl =rtest(s1): // 返回 tme | 
Varb2 = rtest(s2): // 返回 tme | 
varb3 = rtest(s3): // 返回 tme | 
var b4 =r.test(s4); / 返回 tme | 


< 注意 : 为 了 避免 歧义 ， 应 该 为 选择 操作 的 多 个 子 模式 加 上 小 括号 。 


【示例 2】 针 对 表单 中 敏感 词 过 滤 ， 可 以 设计 一 个 敏感 词 列表 的 选择 匹配 模式 ， 然 后 使 用 字符 串 
的 repalce0 方 法 把 所 有 敏感 字符 葵 换 为 字符 编码 ， 并 转换 为 网 页 显示 的 编码 格式 。 


Var s = "ab?c&n": // 待 过 滤 的 表单 提交 信息 | 

var rt = NI\"IMNe&/gi; / 过 滤 敏 感 字符 的 正则 表达 式 | 

fonction fO{ // 普 换 函 数 ， 把 敏感 字符 苦 换 为 对 应 的 网 页 显示 的 编码 格式 “| 
Tetum "&#" + arguments[0].charCodeAt(0) + ":"; | 

和 1 

var a = sreplace(r.f): / 执行 过 滤 蔡 换 

document.write(a): // 在 网 页 中 显示 正常 的 字符 信息 

alert(a): // 返回 字符 串 "a&e#39:b&c#63:c&e#38:" 


更 多 元 字符 将 在 下 面 详细 说 明 ， 如 \、*、+、?、0、 虽 、 人 等 。 
6.2.2 转 义 字符 | 

在 正则 表达 式 中 , 那些 有 特殊 含义 的 字符 , 如果 要 匹配 它们 本 身 , 就 需要 在 它们 前 面 加 上 反 斜 杠 。 | 

【示例 】 如 要 匹配 加 号 ， 就 要 写成 \+。 | 

/1+1/test(1+1) // false 

/+1/test(1+1") //tme 

在 上 面 代码 中 ， 第 一 个 正则 表达 式 直接 用 加 号 匹配 ， 结 果 加 号 解释 成 量词 ， 导 致 不 匹配 。 第 二 个 
正则 表达 式 使 用 反 斜 杠 对 加 号 转 义 ， 就 能 匹配 成 功 。 
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次 提示 : 在 正则 匹配 模式 中 ,需要 用 斜 杠 转 义 的 ， 一 共有 12 个 字符 : ^.、 [、$、(、)、 | *、 +、?、 
| {和 \\。 

| 

| 


全 注意 : 如 果 使 用 RegExp0 构 造 函 数 生 成 正则 表达 式 对 象 ， 转 义 雷 要 使 用 两 个 儿 杠 ， 因 为 字符 囊 
| 内 部 会 先 转 义 一 次 。 例 如 : 


(new RegExpC1\+1)) :test(1+1) /Else 


| (new RegExp('1\\+1)).test(1+1") /ltrue 


| 在 上 面 代码 中 ，RegExpO 作 为 构造 函数 ， 参 数 是 一 个 字符 串 。 但 是 ， 在 字符 串 内 部 ， 反 斜 杠 也 是 
| 转 义 字符 , 所 以 它 会 先 被 反 斜 杠 转 义 一 次 ,然后 再 被 正则 表达 式 转 义 一 次 ,因此 需要 两 个 反 斜 杠 转 义 。 


6.2.3 ”特殊 字符 


正则 表达 式 对 一 些 不 能 打印 的 特殊 字符 ， 提 供 了 表达 方法 。 

\eX: 表示 Ctrl-[X]， 其 中 的 和 是 A-Z 之 中 任 一 个 英文 字母 ， 用 来 匹配 控制 字符 。 
[Wb]: 匹配 退 格 键 (U+0008) ， 不 要 与 \b 混淆 。 

wn: 匹配 换行 键 。 

Yr: 匹配 回 车 键 。 

Wt 匹配 制 表 符 tab (U+0009) 。 

: 匹配 垂直 制 表 符 (U+000B) 。 

Yf: 匹配 换 页 符 (CU+000C) 。 

\0: 匹配 null 字符 (U+0000) 。 

\xhh: 匹配 一 个 以 两 位 十 六 进 制 数 〈\x00-\XFF) 表示 的 字符 。 

| Wwhhhh: 匹配 一 个 以 四 位 十 六 进 制 数 〈\u0000-uFFFF) 表示 的 unicode 字符 。 
| 【示例 1】 下 面 使 用 ASCII 编码 定义 正则 表达 式 直接 量 。 

| varr =/\x61/; / 以 ASCII 编码 匹配 字母 a 


由 于 字母 a 的 ASCII 编码 为 97， 被 转换 为 十 六 进 制 数值 后 为 61， 因 此 如 果 要 匹配 字符 a， 就 应 
该 在 前 面 添加 “\x” 前 组 ， 以 提示 它 为 ASCII 编码 。 


Var s = "javascript": 


因 办 办 基因 办 办 办 办 罗 
< 


var a= smatch(D: // 匹配 第 一 个 字符 a 
【示例 2】 除 了 十 六 进 制 外 ， 还 可 以 直接 使 用 八进制 数值 表示 字符 。 
| varr=AN141/: /141 是 字母 a 的 ASCII 编码 的 八进制 值 
| Var s= "javascript"; 
| var a = s.match(n): / 即 匹配 第 一 个 字符 a 


使 用 十 六 进 制 需要 添加 “\w” 前 缀 ， 主 要 是 避免 语义 混淆 ， 但 是 八进制 不 需要 添加 前 缀 。 
| ASscIT 编码 只 能 够 匹配 有 限 的 单字 节 拉丁 字符 ， 对 于 双 字 节 的 字符 是 无 法 表示 的 。 

| 【示例 3】 下 面 使 用 Unicode 编码 定义 正则 表达 式 直接 量 。 
| 
| 


| Varr =/u0061/; / 以 Unicode 编码 匹配 字母 a 
| Var s = "javascript"; // 字符 串 直接 量 
| var a = s.match(n): / 即 匹配 第 一 个 字符 a 


| 如 果 使 用 Unicode 编码 表示 ， 则 必须 指定 一 个 四 位 的 十 六 进 制 值 ， 并 在 前 面 增加 “\u” 前 组 。 
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6.2.4 字符 类 


字符 类 (Class) 表示 有 一 系列 字符 可 供 选择 ， 只 要 匹配 其 中 一 个 即 可 。 所 有 可 供 选择 的 字符 都 | 
放 在 方 括号 内 ， 如 [xyz] 表示 x、y、z 之 中 任 选 一 个 匹配 。 

/[abc]/ .test(hello world’) // false 

/[abc]/test(apple) // true 
上 面 代码 表示 ， 字 符 串 mello wond 不 包含 as、b、e 这 3 个 字母 中 的 任 一 个 ， 而 字符 由 pple' 包 含 | 
字母 a。 
有 两 个 字符 在 字符 类 中 有 特殊 含义 。 | 

1. 脱 字 符 | 

如 果 方 括号 内 的 第 一 个 字符 是 脱 字符 [和 ]， 则 表示 除了 字符 类 之 中 的 字符 ， 其 他 字符 都 可 以 匹配 。 
如 [^xyz] 表 示 除了 x、y、z 之 外 都 可 以 匹配 。 

/[Aabcj/test(hello world’) // true 

/[Aabc]/test(bbc) // false 

上 面 代码 表示 ， 字 符 串 hello world' 不 包含 字母 a、b、e 中 的 任 一 个 ， 所 以 返回 true 字符 串 bbe' | 
不 包含 a、b、c 以 外 的 字母 ， 所 以 返回 false。 

如 果 方 括号 内 没有 其 他 字符 ， 只 有 [q]， 就 表示 匹配 一 切 字符 ， 其 中 包括 换行 符 ， 而 点 号 〈.) 不 
包括 换行 符 。 

Var s = 'Please yesmmake my day!'; 

s.match(/yes.*day/) // null | 

s.match(/yes[^J*day/) //[ ‘yes\nmake my day] | 

在 上 面 代码 中 , 字符 串 s 含有 一 个 换行 符 , 点 号 不 包括 换行 符 , 所 以 第 一 个 正则 表达 式 匹 配 失败 ; 
第 二 个 正则 表达 式 [和 包含 一 切 字符 ， 所 以 匹配 成 功 。 


< 拟 注意 : 脱 字符 只 有 在 字符 类 的 第 一 个 位 置 才 有 特殊 含义 ， 否 则 就 是 字面 含义 。 


2. 连 字符 

某 些 情况 下 ， 对 于 连续 序列 的 字符 ， 连 字符 〈-) 用 来 提供 简写 形式 ， 表 示 字 符 的 连续 范围 。 如 
[abe] 可 以 写成 [a-c]，[0123456789] 可 以 写成 [0-9]， 同 理 [A-Z] 表 示 26 个 大 写字 母 。 

/a-z/ test('b') // false 

/[a-z]/.test('b’) // true 

在 上 面 代码 中 ， 当 连 字号 〈dash) 不 出 现在 方 括号 之 中 ， 就 不 具备 简写 的 作用 ， 只 代表 字面 的 含 
义 ， 所 以 不 匹配 字符 b。 只 有 当 连 字号 用 在 方 括号 之 中 ， 才 表示 连续 的 字符 序列 。 

【示例 1】 以 下 都 是 合法 的 字符 类 简写 形式 。 

[0-9.] 

[0-9a-fA-F] 

[a-zA-Z0-9-] 

[131] 


上 面 代 码 中 最 后 一 个 字符 类 [1-31]， 不 代表 1 到 31， 只 代表 1 到 3。 
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< 全 注意 : 字符 类 的 连 字符 必须 在 头 尾 两 个 字符 中 间 ， 才 有 特殊 含义 ， 否 则 就 是 字面 含义 。 如 [-9] 就 
| 表示 匹配 连 字符 和 9， 而 不 是 匹配 0~ 9。 

会 内 。 【示例 2] 连 字符 还 可 以 用 来 指定 Unieode 字符 的 范 B 

varstr= "uO130WO131W0132" 

/lu0128-\FFFF]/ test(str) /true 

| 
| < 所 注意 : 不 要 过 分 使 用 连 字符 ， 设 定 一 个 很 大 的 范围 ， 否 则 很 可 能 选中 意料 之 外 的 字符 。 最 典型 的 
| 例子 就 是 [A-z], 表 面 上 它 是 选中 从 大 写 的 A 到 小 写 的 z 之 间 52 个 字母 ,但 是 由 于 在 ASCIT 


| 编码 之 中 ,大 写字 母 与 小 写字 母 之 间 还 有 其 他 字符 ,结果 就 会 出 现 意料 之 外 的 结果 .例如 : 
Aa/test(W) // tme 
| 


上 面 代码 中 ， 由 于 反 斜 枉 〈\) 的 ASCII 码 在 大 写字 母 与 小 写字 母 之 间 ， 结 果 会 被 选中 。 
【示例 3】 字 符 范围 遵循 字符 编码 的 顺序 进行 匹配 。 如 果 将 要 匹配 的 字符 恰好 在 字符 编码 表 中 特 

| 定 区 域内 ， 就 可 以 使 用 这 种 方式 表示 。 
| 如 果 匹 配 任意 ASCII 字符 ， 可 以 设计 如 下 。 
| varr = /[\u0000-\uOOff]/g: 

如 果 匹 配 任意 双 字 节 的 汉字 ， 可 以 设计 如 下 。 
var t= /[^\u0000-\n00ff]/g: 

对 于 数字 来 说 ， 除 了 直接 使 用 数字 表示 外 ， 还 可 以 使 用 Unicode 编码 设计 。 
var r=/[\u0030-\u0039]/g: 

使 用 下 面 字符 模式 可 以 匹配 任意 大 写字 母 。 
varr=/[\u0041-\u004A]/g: 

使 用 下 面 字符 模式 可 以 匹配 任意 小 写字 母 。 
Varr=/[u0061-wu007A]/g: 

【示例 4】 在 字符 范围 内 可 以 混用 各 种 字符 模式 。 
Var s = "abcdez"; // 字符 串 直 接 量 
varr=/[abce-z]/g: 。”// 字符 类 包含 字符 a、b、c， 以 及 e~z 的 任意 字符 
| var a = smatch(D: 1/ 返回 数组 ["a","b","e"."e"."z"] 
| 在 字符 类 内 部 不 要 有 空格 ， 否 则 会 被 认为 是 一 个 空格 进行 匹配 。 
| var r=/[0-9 ]/g: 

上 面 正 则 表达 式 不 仅 匹配 所 有 数字 ， 还 会 匹配 所 有 空格 。 

如 果 要 匹配 任意 大 小 写字 母 和 数字 ， 则 可 以 设计 如 下 。 
VarIT=/[a-zA-Z0-9]/g: 

【示例 5】 字 符 范围 可 以 组 合 使 用 ， 从 而 设计 更 灵活 的 匹配 模式 。 


| vars= "abc4 abd6 abe3 abfl abg7": // 字符 串 直 接 量 
| var t= /ab[c-g][1-7]/g: 
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/ 匹配 第 一 、 二 个 字符 为 ab， 第 三 个 字符 为 从 c 到 g， 第 四 个 字符 为 1~7 的 任意 数字 

var a= s.match(n): 

// 返回 数组 ["abc4"," abd6"," abe3"" abf1"," abg7"] 

在 匹配 过 程 中 ,如 果 需 要 匹配 的 字符 无 法 预料 , 或 者 难以 通过 简单 字符 类 一 一 枚 举 ,那么 可 以 分 | 

析 该 匹配 可 能 不 会 包含 的 字符 ， 以 反 义 字符 范围 实现 以 少 应 多 的 目的 。 | 
varT=/[*0123456789]/g: 


在 这 个 正则 表达 式 直接 量 中 ,将 会 匹配 除了 数字 以 外 任意 的 字符 。 反 义 字符 类 比 简单 字符 类 显得 | 
功能 更 加 强大 和 实用 。 | 


6.2.5 ”预定 义 模式 


预定 义 模式 指 的 是 某 些 常见 模式 的 简写 方式 ， 简 单 说 明 如 下 。 

\d: 匹配 0-9 的 任 一 数字 ， 相 当 于 [0-9]。 

\D: 匹配 所 有 0-9 以 外 的 字符 ， 相 当 于 [^0-9]。 

\w: 匹配 任意 的 字母 、 数 字 和 下 画 线 ， 相 当 于 [A-Za-z0-9 ] 。 

\W: 除 所 有 字母 、 数 字 和 下 夯 线 以 外 的 字符 ， 相 当 于 [^A-Za-z0-9_]。 
\s: 匹配 空格 (包括 制 表 符 、 空 格 符 、 断 行 符 等 ) ， 相 等 于 [\temvv]。 
\S: 匹配 非 空格 的 字符 ， 相 当 于 [AtemvvAf] 。 

\b: 匹配 词 的 边界 。 

加 ”\B: 匹配 非 词 边界 ， 即 在 词 的 内 部 。 

【示例 1】 下 面 是 一 些 演示 代码 。 


国 办 办 办 办 办 加 


ns 的 例子 | 
AS\ws/.exec(hello world’) /[" world"] | 
/wb 的 例子 | 
Mbworld/.test('hello world’) // tme | 
Abworld/test(hello-world) // true | 
Nbworld/.test('helloworld') /false | 
/人 NB 的 例子 

NABworld/ test(hello-world) // false | 
NBworld/ .test(helloworld’) // true | 


在 上 面 代码 中 ，\ 表示 空格 ， 所 以 匹配 结果 会 包括 空格 。\b 表示 词 的 边界 ， 所 以 “wonld” 的 词 
首 必须 独立 (词尾 是 否 独立 未 指定 )， 才 会 匹配 。 同 理 ，\B 表示 非 词 的 边界 ， 只 有 “world” 的 词 首 不 
独立 ， 才 会 匹配 。 

【示例 2】 通常 ， 正 则 表达 式 遇 到 换行 符 \n》 就 会 停止 匹配 。 

va html = "<b>Hello</b>n<i>world!</i>": 

/.#/.exec(htmD[O] 

/ "<b>Hello</b>" 

上 面 代码 中 ， 字 符 串 html 包含 一 个 换行 符 ， 结 果 点 字符 〔.》 不 匹配 换行 符 ， 导 臻 匹配 结果 可 能 
不 符合 原意 。 这 时 使 用 \s 字符 类 ， 就 能 包括 换行 符 。 

var html = "<b>Hello</b>\n<i>world!</i>": 

/DS\s]*/.exec(htmD[O] 

/ "<b>Hello</b>n<i>world!</i>" 


“Ws 


Re 网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版 ) 


/ 另 一 种 写法 〈 用 到 了 非 捕获 组 ) 
| AG:ISwexecthtmD[O 

| Vs<b>Helo<b>msi>worldi<i>" 

| 


f | 上 面 代码 中 ，[\S\s] 指 代 一 切 字 符 。 


人 


Si 模式 的 精确 匹配 次 数 ， 使 用 大 括号 ({}) 表示 。{n} 表 示 恰 好 重复 n 次 ，{n,} 表 示 至 少 重复 n 次 ， 
| 也 由 表示 重复 不 少 于 nm 次， 不 多 于 mm 次 。 例 如 : 


/lo{2}k/ test(look) /true 
/lo{2.5}k/ test(looook’) // true 


上 面 代码 中 ， 第 一 个 模式 指定 o 连续 出 现 两 次 ， 第 二 个 模式 指定 o 连续 出 现 2 一 5 次 。 


量词 用 来 设 定 某 个 模式 出 现 的 次 数 ， 具 体 说 明 如 下 。 
回 ?: 问号 ,表示 某 个 模式 出 现 0 次 或 1 次 ， 等 同 于 {0, 1}。 
*; 星 号 ， 表 示 某 个 模式 出 现 0 次 或 多 次 ， 等 同 于 {0,}。 
+: 加 号 ， 表 示 某 个 模式 出 现 1 次 或 多 次 ， 等 同 于 {1,}。 
| 【示例 】 
Wt 出 现 0 次 或 1 次 
| /test/ .test('test'") /tme 
/toest/ test('est) // true 
| //t 出 现 1 次 或 多 次 
| /ttest/ .test('test') // true 
| /ttest/.test('ttest) /ltrue 


/ttest/:test('est’) // false 
/1t 出 现 0 次 或 多 次 
/twest/.test('test’) // tme 


| /twest/ .test('ttest’) // tue 
| /twest/ .test('tttest') // trme 
| /txest/.test('est') /tme 


6.2.8 ” 贪 林 模式 


| 
6.2.7 节 介绍 3 个 量词 字符 ， 在 默认 情况 下 都 是 最 大 可 能 匹配 ， 即 匹配 直到 下 一 个 字符 不 满足 匹 
| 配 规则 为 止 ， 这 被 称 为 贪 禁 模式 。 例 如 : 
| Var s='aaa'; 
s.match(/at+/) / ["aaa"] 
上 面 代 码 中 , 模式 是 /at/， 表 示 匹 配 1 个 a 或 多 个 a, 那么 到 底 会 匹配 几 个 a 呢 ? 因为 默认 是 贫 禁 
| 模式 ， 会 一 直 匹 配 到 字符 a 不 出 现 为 止 ， 所 以 匹配 结果 是 3 个 a。 
| 如 果 想 将 贪 禁 模式 改 为 非 贪 禁 模式 ， 可 以 在 量词 符 后 面 加 一 个 问号 。 
| Var s = 'aaa'; 


| s.match(/a+?/) 如 Pa 
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在 上 面 代码 中 ,模式 结尾 添加 了 一 个 问号 /at+?/， 这 时 就 改 为 非 贪 禁 模 式 ， 一 旦 条 件 满足 ， 就 不 再 
往 下 匹配 。 
除了 非 贪 禁 模 式 的 加 号 (+)， 还 有 非 贪 禁 模 式 的 星 号 (*)。 
*?: 表示 某 个 模式 出 现 0 次 或 多 次 ， 匹 配 时 采用 非 贪 禁 模式 。 
+?: 表示 某 个 模式 出 现 1 次 或 多 次 ， 匹 配 时 采用 非 贪 禁 模式 。 
【示例 1】 下 面 示例 显示 当 在 保证 右 侧重 复 类 量词 最 低 匹配 次 数 基础 上 ， 最 左 侧 的 重复 类 量词 将 
尽 可 能 占有 所 有 字符 。 | 
var s ="<html><head><title></title></head><body></body></html>"; 
VarTt=/(<.*>)(<.#>)/ ! 
var a= s.match(n):; | 
alert(a[1]); / 左 侧 匹配 "<html><head><title></title></head><body></body>" | 
alert(a[2]);// 右 侧 子 表达 式 匹 配 "</html>" 
【示例 2】 下 面 示例 演示 了 惰性 匹配 结果 。 | 
Var s ="<html><head><title></title></head><body></body></html>"; | 
Varr=/<.*#7>/ | 
vara=s.match(D: / 返回 单元 素数 组 ["<html>"] 


6.2.9 修饰 字符 


修饰 字符 (Modifier) 表示 模式 的 附加 规则 , 放 在 正则 匹配 模式 的 最 尾部 。 修 饰 符 可 以 单个 使 用 ， 
也 可 以 多 个 一 起 使 用 。 例 如 : 


/ 单个 修饰 符 

Var TegeX = /test/i; 
// 多 个 修饰 符 

Var regex = /test/ig: 


1.g 修饰 符 | 

在 默认 情况 下 ， 第 一 次 匹配 成 功 后 ， 正 则 表达 式 对 象 就 停止 了 向 下 匹配 。g 修饰 符 表示 全 局 匹配 | 
(Global)， 加 上 它 以 后 ， 正 则 表达 式 对 象 将 匹配 全 部 符合 条 件 的 结果 ， 主要 用 于 搜索 和 替换 。 例 如 : “| 

Var regex = /b/: 

Var str = 'abba'; 

regex.test(str); // true 

Tegex.test(stD): // true 

regex.test(str): // true 

在 上 面 代码 中 ， 正 则 匹配 模式 不 含 g 修饰 符 ， 每 次 都 是 从 字符 串 头 部 开始 匹配 。 所 以 ， 连 续 做 了 
3 次 匹配 ， 都 返回 true。 

var regex = /b/g: 

Var str = 'abba'; 

Tegex.test(str): // true 

Tegex.test(stD): // true 

Tegex.test(str): // false 
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| 在 上 面 代码 中 ， 正 则 匹配 模式 含有 g 修饰 符 ， 每 次 都 是 从 上 一 次 匹配 成 功 处 ， 开 始 向 后 匹配 。 因 
| 为 字符 串 abba 只 有 两 个 b， 所 以 前 两 次 匹配 结果 为 tue， 第 三 次 匹配 结果 为 false。 
。 | ”2.1 修饰 符 
和 下 ”在 默认 情况 下 ， 正 则 表达 式 对 象 区 分 字母 的 大 小 写 ， 加 上 i 修饰 符 以 后 表示 忽略 大 小 写 


(ignorecase )。 例 如 : 


| /abc/ .test(ABC') // false 
| /abc/i.test(ABC') // true 


上 面 代 码 表 示 ， 加 了 i 修饰 符 以 后 ， 不 考虑 大 小 写 ， 所 以 模式 abe 匹配 字符 串 ABC。 
3. m 修饰 符 
m 修饰 符 表示 多 行 模式 《Multiline )， 会 修改 ^ 和 S$ 的 行为 。 默 认 情 况 下 〈 即 不 加 m 修饰 符 时 )，^ 
和 $ 匹 配 字符 串 的 开始 处 和 结尾 处 ， 加 上 m 修饰 符 以 后 ，^ 和 $ 还 会 匹配 行 首 和 行 尾 ， 即 ^ 和 $ 会 识别 换 
| 行 符 (Qn)。 例 如 : 
| /world$/.test('hello world\n') // false 
| /world$/m.test('hello world\n') // true 
| 
| 上 面 的 代码 中 ， 字 符 串 结尾 处 有 一 个 换行 符 。 如 果 不 加 m 修饰 符 ， 匹 配 不 成 功 ， 因 为 字符 串 的 
| 结尾 不 是 world; 加 上 以 后 ，$ 可 以 匹配 行 尾 。 
/bmtest(amb) // true 
上 面 代码 要 求 匹 配 行 首 的 b， 如 果 不 加 m 修饰 符 ， 就 相当 于 b 只 能 处 在 字符 串 的 开始 处 。 


6.2.10 ”模式 分 组 


| 使 用 小 括号 可 以 对 正则 表达 式 字符 串 进 行 任意 分 组 , 在 小 括号 内 的 字符 串 表示 子 表达 式 , 或 者 称 
| 为 子 模式 , 子 表达 式 具有 独立 的 匹配 功能 ， 匹 配 结果 也 具有 独立 性 。 同 时 跟随 在 小 括号 后 的 量词 将 会 
| 作用 于 整个 子 表达 式 。 
| 在 正则 表达 式 中 ， 表 达 式 分 组 具有 极 高 的 应 用 价值 ， 下 面 结合 示例 进行 说 明 。 
| 【示例 1】 把 单独 的 项 目 进行 分 组 ， 以 便 合成 子 表达 式 ， 这 样 就 可 以 像 处 理 一 个 独立 的 字符 那 
| 样 ， 使 用 |、+、* 或 ?等 元 字符 来 处 理 它们 。 

Var s ="javascript is not java": 

var 1 = /java(script)?/g: 

var a= smatch(D: // 返回 数组 ["javascript","java"] 

上 面 的 正则 表达 式 可 以 匹配 字符 串 "javascript"， 也 可 以 匹配 字符 串 "java"， 因 为 在 匹配 模式 中 通 
过 分 组 , 使 用 量词 “?” 来 修饰 该 子 表达 式 , 这 样 匹 配 字符 串 时 ， 其 后 既 可 以 有 "script"， 也 可 以 没有 。 

【示例 2】 在 正则 表达 式 中 ， 通 过 分 组 可 以 在 一 个 完整 的 模式 中 定义 子 模式 。 当 一 个 正则 表达 式 
成 功 地 与 目标 字符 串 相 匹 配 时 ， 也 可 以 从 目标 字符 串 中 抽出 与 小 括号 中 的 子 模式 相 匹 配 的 部 分 。 

Var s ="ab=21.bc=45,cd=43"; 

Vart = /(Ww+)(\d#*)/; 

Var a= s.match(r): / 返回 数组 ["ab=21"."ab"."21"] 


| 在 上 面 的 示例 中 ， 我 们 不 仅 要 匹配 出 每 个 变量 声明 ， 而 且 希 望 知道 每 个 变量 的 名 称 及 其 值 。 这 个 
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时 候 如 果 使 用 小 括号 进行 分 组 ， 把 需要 独立 获取 的 信息 作为 子 表达 式 ， 这 样 就 可 以 不 仅仅 抽出 声明 ， 
而 且 还 可 以 提取 更 多 有 用 的 信息 。 
【示例 3】 在 同一 个 正则 表达 式 的 后 部 可 以 引用 前 面 的 子 表达 式 。 通 过 在 字符 “\” 后 加 一 位 或 多 | 
位 数字 来 实现 。 数 字 指 定 了 带 括号 的 子 表达 式 在 正则 表达 式 中 的 位 置 。 如 “\1” 引 用 的 是 第 一 个 带 括 | 
号 的 子 表达 式 ,“\2” 引 用 的 是 第 二 个 带 小 括号 的 子 表达 式 。 | 
Var s="<hl>title<h1><p>text<p>": 
VarT=/ 人 (<V?VW+>). 要 1/g: 
var a= s.match(n): // 返回 数组 ["<hl>title<h1>"."<p>text<p>"] 
在 上 面 的 示例 中 ， 通 过 引用 前 面子 表达 式 匹配 的 文本 ， 以 实现 成 组 匹配 字符 串 。 
【示例 4】 由 于 子 表达 式 可 以 嵌 套 在 别 的 子 表达 式 中 ， 所 以 它 的 位 置 编号 是 根据 左 括号 的 顺序 来 
定 的 。 在 下 面 的 正则 表达 式 中 ， 堪 套 的 子 表达 式 (<V?\w+>) 被 指定 为 “\2”。 
Var s="<hl>title<h1><p>text<p>": 
VarT=/((<V2Nw+>).t\2)/g: 
var a = s.match(n); // 返回 数组 ["<hl>title<h1>","<p>text<p>"] 
【示例 5】 对 正则 表达 式 中 前 面子 表达 式 的 引用 ， 所 指 的 并 不 是 那个 子 表达 式 的 模式 ， 而 是 与 那 
个 模式 相 匹配 的 文本 。 例 如 ， 下 面 这 个 字符 串 就 无 法 实现 匹配 。 
Var s ="<hl>title</hl><p>text</p>"; 
VarTt=/((<VN\Ww+>).*\2)/g: 
var a = s.match(n):; // 返回 null 
【示例 6】 虽 然 子 表达 式 (<\A\w+>) 可 以 匹配 “<hl>”， 也 可 以 匹配 “</hl>”， 但 是 对 于 “\2 ”来 | 
， 它 引用 的 是 前 面子 表达 式 匹 配 的 文本 ， 而 不 是 它 的 匹配 模式 。 如 果 要 引用 前 面子 表达 式 的 匹配 模 | 
， 则 必须 使 用 下 面 正则 表达 式 。 | 
VarT=/((<V2VwW+>).*((<V?VwW+>))/g: 
vara=sImatch(D): / 返回 数组 ["<hl>title</h1>"."<p>text</p>"] 


6.2.11 分 组 引用 


在 正则 表达 式 执行 匹配 运算 时 ， 表 达 式 计算 会 自动 把 每 个 分 组 ( 子 表达 式 ) 匹配 的 文本 临时 存储 
起 来 以 备 将 来 使 用 。 这 些 存储 在 分 组 中 的 特殊 值 ， 被 称 之 为 反 向 引用 。 反 向 引用 将 遵循 从 左 到 右 的 顺 
序 ， 根 据 表达 式 中 的 左 括号 字符 的 顺序 进行 创建 和 编号 。 

【示例 1】 下 面 示例 定义 匹配 模式 包含 多 个 子 表达 式 。 

var s = "abcdefehijklmn": 

Var t= /(a(b(O)))/: 

var a = s.match(n): / 返回 数组 ["abe"."abe"."be"."c"] | 

在 这 个 分 组 匹配 模式 中 ， 共 产生 了 3 个 反 向 引用 ， 第 一 个 是 “(a(b(c)))”， 第 二 个 是 “(b(c))”， 第 | 
三 个 是 “(ec)” 它们 引用 的 匹配 文本 分 别 是 字符 串 "abe"、"be" 和 "e"。 | 

反 向 引用 在 应 用 开发 中 主要 包含 以 下 几 种 常规 用 法 。 | 

【示例 2】 在 正则 表达 式 对 象 的 test0 方 法 ， 以 及 字符 串 对 象 的 matchO 和 searchO 等 方法 中 使 用 。 
在 这 些 方法 中 ， 反 向 引用 的 值 可 以 从 RegExp0 构 造 函 数 中 获得 。 

Var s = "abcdefehijklmn": 

var T= /(W)(\W)(W)/: 


此 演 
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Ltest(s); 

alert(RegExp.$1): / 返回 第 1 个 子 表达 式 匹 配 的 字符 a 
alert(RegExp.$2): / 返回 第 2 个 子 表达 式 匹 配 的 字符 b 
alert(RegExp.$3); // 返回 第 3 个 子 表达 式 匹配 的 字符 c 


通过 上 面 示例 可 以 看 到 ,正则 表达 式 执行 匹配 测试 后 ,， 所 有 子 表达 式 匹 配 的 文本 都 被 分 组 存储 在 


RegExpO 构 造 函 数 的 属性 内 ， 通 过 前 绥 符 号 $ 与 正则 表达 式 中 子 表达 式 的 编号 来 引用 这 些 临 时 属性 。 


其 中 属性 $1 标识 符 指向 第 一 个 值 引 用 ， 属 性 $2 标识 符 指向 第 二 个 值 引用 ， 依 此 类 推 。 
【示例 3】 可 以 直接 在 定义 分 组 的 表达 式 中 包含 反 向 引用 。 这 可 以 通过 使 用 特殊 转 义 序列 
(如 UL、 吕 等 ) 来 实现 (详细 内 容 可 以 参阅 上 6.2.10 节 内 容 )。 


Var s= "abcbcacba"; 

vart = /WW)W) B32/: 

Var b=L.test(s); / 验证 正则 表达 式 是 否 匹 配 该 字符 串 
alert(b): // 返回 tme 


在 上 面 示例 的 正则 表达 式 中 ,“\1 ”表示 对 第 一 个 反 向 引用 Cw) 所 匹配 的 字符 a 引用 ,“\2” 表 示 
对 第 二 个 反 向 引用 (Ww) 所 匹配 的 字符 b 引用 ,“\3 ”表示 对 第 二 个 反 向 引用 Qw) 所 匹配 的 字符 c 引用 。 

【示例 4】 可 以 在 字符 串 对 象 的 replace0 方 法 中 使 用 。 通 过 使 用 特殊 字符 序列 $1、$2、$3 等 来 实 
现 。 例 如 ， 在 下 面 的 示例 中 将 颠倒 相 邻 字母 和 数字 的 位 置 。 

Vars= "aallbb22c3d4e5f6"; 

VarT = /(\W+?)(\d+)/g: 

Varb = s.replace(r,"$2$1"): 

alert(b): // 返回 字符 串 "11aa22bb3c 4dSe6f" 


在 上 面 例子 中 ， 正 则 表达 式 包括 两 个 分 组 ， 第 一 个 分 组 匹配 任意 连续 的 字母 ， 第 二 个 分 组 匹配 任 


| 意 连 续 的 数字 。 在 replace0 方 法 的 第 二 个 参数 中 ,$1 表示 对 正则 表达 式 中 第 一 个 子 表达 式 匹配 文本 的 
| 引用 ， 而 $2 表示 对 正则 表达 式 中 第 二 个 子 表达 式 匹 配 文本 的 引用 ， 通 过 颠倒 $1 和 $2 标识 符 的 位 置 ， 


即 可 实现 字符 串 的 颠倒 替换 原 字符 串 。 
6.2.12 非 引 用 组 
正则 表达 式 分 组 会 占用 一 定 的 系统 资源 , 在 较 长 的 正则 表达 式 中 , 存储 反 向 引用 会 降低 匹配 速度 。 


| 但 是 很 多 时 候 使 用 分 组 仅 是 为 了 设置 操作 单元 ， 而 不 是 为 了 引用 ， 这 时 建议 选用 一 种 非 引用 型 分 组 ， 


| 它 不 会 创建 反 向 引用 。 


创建 非 引用 型 分 组 的 方法 是 ， 在 左 括号 的 后 面 分 别 加 上 一 个 问号 和 冒号 (?:)， 表 示 不 返回 该 组 匹配 
的 内 容 ， 即 匹配 的 结果 中 不 计 入 这 个 括号 。 

【示例 】 通 过 使 用 非 引用 型 分 组 ， 既 可 以 拥有 与 匹配 字符 串 序列 同样 的 能 力 ， 又 不 用 存储 匹配 文 
本 的 开销 。 


Var sl = "abc": 

Wr 2 = 1233 

varf= 二 /2:\WW*?)I(?:\d*?)/; ”1/ 非 引 用 型 分 组 
var a=r.test(s1): // 返回 true 

var b =r.test(s2): // 返回 tme 


此 时 如 果 调 用 RegExp 对 象 的 $1 标识 符 来 引用 分 组 匹配 的 文本 信息 ,结果 会 返回 一 个 空 字 串 ， 因 
为 该 分 组 是 非 引用 型 的 。 
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alert(RegExp.$1): 1/ 返回" 

正 因 如 此 ， 字 符 串 对 象 的 replace0 方 法 就 不 能 通过 RegExp.$1 变量 来 使 用 任何 反 向 引用 ， 或 在 正 
则 表达 式 中 使 用 它 。 | 
非 引用 型 分 组 对 于 必须 使 用 子 表 达 式 , 但 是 又 不 希望 存储 无 用 的 匹配 信息 而 浪费 系统 资源 , 或 者 | 
希望 提高 匹配 速度 ， 是 非常 重用 的 方法 。 | 


6.2.13 ”声明 边界 


声明 边界 包括 正 向 声明 和 反 向 声明 两 种 模式 。 
正 向 声明 : 声明 表示 条 件 的 意思 ， 是 指定 匹配 模式 后 面 的 字符 必须 被 匹配 ， 但 不 返回 匹配 结 
果 。 正 向 声明 使 用 “(?= 匹 配 条 件 )” 表 示 。 
【示例 1】 下 面 代码 定义 一 个 正 向 声明 的 匹配 模式 。 
Vars= "a:123 b=345"; 
VarT= Nw*(?—)/; / 使 用 正 向 声明 ， 指 定 执行 匹配 必须 满足 的 条 件 
vara=smatch(D: / 返回 数组 ["b"] 
在 上 面 示例 中 ， 通 过 使 用 (? 一 ) 锚 定 条 件 ， 指 定 只 有 在 \w* 所 能 够 匹配 的 字符 后 面 跟随 一 个 等 号 字 
符 ， 才 能 够 执行 \w* 匹 配 。 所 以 ， 最 后 匹配 的 是 字符 b， 而 不 是 字符 a。 
回 反 向 声明 : 与 正 向 声明 匹配 相反 ,指定 接 下 来 的 字符 都 不 必 匹 配 。 反 向 声明 使 用 “(?! 匹 配 条 
件 )” 来 表示 。 
【示例 2】 下 面 代 码 定 义 一 个 反 向 声明 的 匹配 模式 。 
Var s= "a:123 b=345"; 
VarT= Aw*(?!=)/: // 使 用 反 向 声明 ， 指 定 执行 匹配 不 必 满 足 的 条 件 
vara= smatch(D: / 返回 数组 ["a"] 
在 上 面 示例 中 ， 通 过 使 用 (?!=) 锚 定 条 件 ， 指 定 只 有 在 “\w*” 所 能 够 匹配 的 字符 后 面 不 跟随 一 个 | 
等 号 字符 ， 才 能 够 执行 \w* 匹 配 。 所 以 ， 最 后 匹配 的 是 字符 a， 而 不 是 字符 b。 


容 提示 : 声明 虽然 包含 在 小 括号 内 ， 但 不 是 分 组 。 目前，JavaScript 仅 支 持 正 向 声明 ， 而 不 支持 后 
向 声明 。 


6.3 使 用 RegExp 


RegExp 是 JavaScript 标准 库 对 象 ，JavaScript 通过 内 置 RegExp 类 型 支持 正则 表达 式 ，String 和 | 
RegExp 类 型 都 提供 了 执行 正则 表达 式 匹 配 操作 的 方法 。 | 


6.3.1 ”RegExp 对 象 属性 


RegExp 对 象 包含 5 个 原型 属性 ， 这 些 属性 可 以 分 为 以 下 两 类 。 

一 类 是 修饰 符 相 关 ， 返 回 一 个 布尔 值 ， 表 示 对 应 的 修饰 符 是 否 设置 ， 例 代码 如 下 。 
ignoreCase: 返回 一 个 布尔 值 ， 表 示 是 否 设置 了 i 修饰 符 ， 该 属性 只 读 。 

回 global: 返回 一 个 布尔 值 ， 表 示 是 否 设置 了 g 修饰 符 ， 该 属性 只 读 。 
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| 2 
| multiline: 返回 一 个 布尔 值 ， 表 示 是 否 设置 了 mm 修饰 符 ， 该 属性 只 读 。 
| Varr = /abc/igm: 

| rignoreCase // true 


内 rglobal//true 
医 靖 | rmultiline /true 


另 一 类 是 与 修饰 符 无 关 的 属性 ， 主 要 有 两 个 ， 示 例 代码 如 下 。 
| lastIndex: 返回 下 一 次 开始 搜索 的 位 置 。 该 属性 可 读 写 , 但 是 只 在 设置 了 g 修饰 符 时 有 意义 。 
source: 返回 正则 表达 式 的 字符 串 形式 (不 包括 反 斜 杠 ) ， 该 属性 只 读 。 
Var r= /abc/igm:; 
TlastIndex //0 
Lr.source // "abc" 


【示例 1】lastindex 属性 比较 有 用 ， 对 于 具有 修饰 符 g 的 匹配 模式 来 说 ， 该 属性 存储 了 在 字符 串 
中 下 一 次 开始 检索 的 位 置 。 下 面 示例 演示 了 exec() 方 法 如 何 配合 lastindex 属性 实现 全 局 检索 。 


Var s = "javascript is not java"; 


Varr = /a/gi; / 正则 表达 式 直 接 量 
Lexec(s): / 第 一 次 执行 匹配 
alert(r lastIndex): // 返回 值 为 2 
| rexec(s): / 第 二 次 执行 匹配 
| alertclastindex): // 返回 值 为 4 
| rexec(s): / 第 三 次 执行 匹配 
| alert(rlastIndex): / 返回 值 为 20 
| Lexec(s): / 第 四 次 执行 匹配 
| alert(r.lastIndex): // 返回 值 为 22 
| Lexec(s): / 第 五 次 执行 匹配 
| alert(r.lastIndex): / 返回 值 为 0 
|| 
| 


在 上 面 示例 中 ， 正 则 表达 式 r 查找 字母 a。 当 它 首 次 检测 时 ， 发 现在 第 二 个 位 置 ( 序 号 为 1 ) 有 
-个 字母 a, 于 是 lastIndex 属性 就 被 设置 为 2, 记录 开始 下 一 次 匹配 时 的 起 始 位 置 。 当 再 次 调用 exec() 
方法 时 ， 就 会 从 lastIndex 属性 指定 的 位 置 开始 匹配 ， 以 此 类 推 。 
【示例 2】 可 以 手动 改变 lastIndex 属性 值 ， 强 迫 正则 表达 式 从 指定 的 位 置 开始 执行 检测 。 
Var s = "0123456789"; 


varr= /dlg: / 匹配 单个 数字 
| rlastIndex = 5: / 指定 匹配 起 始 位 置 为 5S， 即 从 第 六 个 字符 开始 匹配 
| var a =L.exec(s): / 执行 匹配 
| alert(a): / 返回 匹配 数字 为 5 
6.3.2 test() 
正则 表达 式 对 象 的 test0 方 法 返回 一 个 布尔 值 ， 表 示 当 前 模式 是 否 能 匹配 参数 字符 串 。 例 如 : 
/cat/.test('cats and dogs) // true 


上 面 代码 验证 参数 字符 串 中 是 否 包含 cat， 结 果 返 回 true。 
【示例 1】 如果 正则 表达 式 带 有 g 修饰 符 ， 则 每 一 次 test0) 方 法 都 从 上 一 次 结束 的 位 置 开始 向 后 
匹配 。 


| Varr= /x/g: 
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TlastIndex /0 
Ttest(s) /tme 
ITlastIndex /2 
rtest(s) /l/true 
TlastIndex /114 
Ttest(s) // false 


上 面 代码 的 正则 表达 式 对 象 使 用 了 g 修饰 符 ， 表 示 要 记录 搜索 位 置 。 接 着 ， 三 次 使 用 test 方法 ， 


每 一 次 开始 搜索 的 位 置 都 是 上 一 次 匹配 的 后 一 个 位 置 。 


【示例 2】 带 有 g 修饰 符 时 ， 可 以 通过 正则 表达 式 对 象 的 lastIndex 属性 指定 开始 搜索 的 位 置 。 


Varr= /x/g:; 

Var Ss=" xX Xx’; 

r.lastIndex = 4: 

Ltest(s) // false 


上 面 代 码 指定 从 字符 串 的 第 五 个 位 置 开始 搜索 ， 这 个 位 置 是 没有 字符 的 ， 所 以 返回 false。 
这 提示 : 不 lastIndex 属性 只 对 同一 个 正则 表达 式 有 效 ， 所 以 下 面 这 样 写 是 错误 的 。 


Var count = 0; 
while (a/g.test(babaa)) countt+: 


上 面 代码 会 导致 无 限 循环 ， 因 为 while 循环 的 每 次 匹配 条 件 都 是 一 个 新 的 正则 表达 式 ， 导 致 


lastIndex 属性 总 是 等 于 0。 


如 果 正 则 模式 是 一 个 空 字符 串 ， 则 匹配 所 有 字符 串 。 


new RegExp(").test('abc’) // tme 


6.3.3 exec() 
正则 表达 式 对 象 的 exec0 方 法 ， 可 以 返 加 


一 个 匹配 成 功 的 子 字符 串 ， 和 否则 返回 null。 例 


Vars="' XxX Xx’; 

Var rl = /x/: 

VarI2 = /y/:; 

Il.exec(s) 则 匠 侧 | 
12.exec(s) /mull 


上 面 代码 中 ， 正 则 表达 式 对 象 rl 匹配 成 功 ， 返 回 


如 : 


I2 匹配 失败 ， 返 回 null。 


一 个 数组 ， 成 员 是 匹配 结果 ; 正则 表达 式 对 象 


【示例 1】 如果 正则 表示 式 包 含 圆 括 号 〈 即 含有 “组 匹配 ”)， 则 返回 的 数组 会 包括 多 个 成 员 。 第 
一 个 成 员 是 整个 匹配 成 功 的 结果 ， 后 面 的 成 员 就 是 圆 括号 对 应 的 匹配 成 功 的 组 。 也 就 是 说 ， 第 二 个 成 
员 对 应 第 一 个 括号 ， 第 三 个 成 对 应 第 二 个 括号 ， 以 此 类 推 。 整 个 数组 的 length 属性 等 于 组 匹配 的 数量 


再 加 1。 
Vars=' xX Xx'; 
Vart=/ (x)/: 
Lexec(s) VN | 


"0s* 


| 回 
匹配 结果 。 如 果 发 现 匹配 ， 就 返回 一 个 数组 ， 成 员 是 每 | 


上 面 代码 的 exec0 方 法 ， 返 


配 的 结果 。 


器 
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一 个 数组 。 第 一 个 成 员 是 整个 匹配 的 结果 ， 第 二 个 成 员 是 圆 括号 匹 


exec0 方 法 的 返回 数组 还 包含 以 下 两 个 属性 。 


input: 整个 原 字 符 串 。 


index: 整个 模式 匹配 成 功 的 开始 位 置 ( 从 0 开始 计数 ) 。 


例如 : 

varTt= /a(bt)a/; 

var arr =L.exec(" abbba aba )): 
alr 

arrindex 

arrinput 


/ ["abbba". "bbb"] 
/1 
//" abbba aba " 


上 面 代码 中 的 index 属性 等 于 1， 是 因为 从 原 字符 串 的 第 二 个 位 置 开 始 匹配 成 功 。 
【示例 2】 如 果 正 则 表达 式 加 上 g 修饰 符 ， 则 可 以 使 用 多 次 exec0 方 法 ， 下 一 次 搜索 的 位 置 从 上 


一 次 匹配 成 功 结束 的 位 置 开始 。 


Var = /a(bt)a/g; 
Var al =L.exec(' abbba aba "): 


TlastIndex 

Var a2 =L.exec(" abbba aba "): 
a2 

a2.index 

LlastIndex 

Var a3 =r.exec(" abbba aba "); 
a3 

a3.index 

TlastIndex 

Var a4 =L.exec(" abbba aba "); 
a4 

a4.index 

TlastIndex 


// [abbba'. "bbb'] 
/1 
/6 


// [aba'. b'] 
/7 
/10 


VWnull 
/TypeError Cannot read property 'index' of null 
/0 


// [abbba'. bbb] 
/1 
/6 


| 上面 代 码 连 续 用 了 四 次 exee( 方 法 ， 前 三 次 都 是 从 上 一 次 匹配 结束 的 位 置 向 后 匹配 。 当 第 三 次 
| 配 结束 以 后 ， 整 个 字符 串 已 经 到 达 尾部 ， 正 则 表达 式 对 象 的 lastIndex 属性 重 置 为 0， 意味 着 第 四 次 
| 配 将 从 头 开始 。 
【示例 3】 利 用 g 修饰 符 允 许多 次 匹配 的 特点 ， 可 以 用 一 个 循环 完成 全 部 匹配 。 


var r= /a(bt)a/g: 

var s=" abbba aba ': 

while (true) { 
Var match = r.exec(s): 
if (!match) break: 
console.log(match[1]): 

有 

// bbb 

lb 
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【示例 4】 正 则 表达 式 对 象 的 lastIndex 属性 不 仅 可 读 ， 还 可 写 。 一 旦 手动 设置 了 lastIndex 的 值 ， 
就 会 从 指定 位 置 开始 匹配 。 但 是 ， 这 只 在 设置 了 g 修饰 符 的 情况 下 ， 才 会 有 效 。 


Var T= /a/; 

rlastIndex = 7: / 无效 
Var match =T.exec(xaxa’): 

match index /1 
rlastIndex /7 


上 面 代码 设置 了 lastIndex 属性 ， 但 是 因为 正则 表达 式 没有 g 修饰 符 ， 所 以 无 效 。 每 次 匹配 都 是 
从 字符 串 的 头 部 开始 。 
如 果 有 g 修饰 符 ，lastIndex 属性 就 会 生效 。 


Varr= /a/g; 

ITlastIndex = 2: 

Var match = r.exec('xaxa’): 
match.index /3 
TlastIndex /4 


上 面 代码 中 ，lastIndex 属性 指定 从 字符 的 第 三 个 位 置 开 始 匹 配 。 成 功 后 ， 下 一 次 匹配 就 是 从 第 五 
个 位 置 开始 。 
【示例 5】 如 果 正 则 表达 式 对 象 是 一 个 空 字符 串 ， 则 exec0 方 法 会 匹配 成 功 ， 但 返回 的 也 是 空 字 
符 串 。 
VarT1 = Dew RegExp("): 
Var al =r1.exec('abe"): 


al /VC 
al.index /0 
Tl.lastIndex /0 


Var 12 = neWRegEXp(O): 
Var a2 =12.exec('abc"); 


a2 | 
a2.index /0 
I2.lastIndex /0 


字符 串 对 象 的 方法 之 中 ， 有 4 种 与 正则 对 象 有 关 。 

match(): 返回 一 个 数组 ， 成 员 是 所 有 匹配 的 子 字符 串 。 

回 search0: 按照 给 定 的 正则 表达 式 进 行 搜索 ， 返 回 一 个 整数 ， 表 示 匹 配 开始 的 位 置 。 
回 replace0: 按照 给 定 的 正则 表达 式 进 行 苦 换 ， 返 回 蔡 换 后 的 字符 串 。 

split0: 按照 给 定 规则 进行 字符 串 分 割 ， 返 回 一 个 数组 ， 包 含 分 割 后 的 各 个 成 员 。 


6.3.4 ”RegExp 静态 属性 


RegExp 类 型 定义 一 组 静态 属性 ， 访 问 它们 可 以 了 解 当前 页 面 最 新 一 次 模式 匹配 的 详细 信息 ， 具 体 | 视频 讲解 
说 明 如 表 6.1 所 示 。 这 些 静 态 属性 都 有 两 个 名 字 : 长 名 (全称 ) 和 短 名 (简称 ， 以 美元 符号 开头 表示 )。 | 
表 6.1 RegExp 静态 属性 
长 名 | 短 名 说 明 
input $ 返回 当前 所 作用 的 字符 串 ， 初 始 值 为 空 字符 串 "" 
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续 表 
| 长 名 | 短 名 说 明 
人 当前 模式 匹配 的 开始 位 置 ， 从 0 开始 计数 。 初 始 值 为 - 1， 每 次 成 功 匹 配 时 ，index 
会 内 | 属性 值 都 会 随 之 改变 
= 天 当前 模式 匹配 的 最 后 一 个 字符 的 下 一 个 字符 位 置 ， 从 0 开始 计数 ， 常 被 作为 继续 
lastmdex 匹配 的 起 始 位 置 。 初 始 值 为 - 1， 表 示 从 起 始 位 置 开 始 搜索 ， 每 次 成 功 匹配 时 ， 
| lastmdex 属性 值 都 会 随 之 改变 
[| 最 后 模式 匹配 的 字符 串 ， 初 始 值 为 空 字符 串 ""。 在 每 次 成 功 匹配 时 ，lastMatch 属 
性 值 都 会 随 之 改变 
最 后 子 模式 匹配 的 字符 囊 ， 如 果 匹 配 模式 中 包含 有 子 模式 包含 小 括号 的 子 表达 
lastparen | s+ 式 ) ， 在 最 后 模式 匹配 中 最 后 一 个 子 模式 所 匹配 到 的 子 字符 串 。 初 始 值 为 空 字符 


串 "。 每 次 成 功 匹 配 时 ，lastParen 属性 值 都 会 随 之 改变 

在 当前 所 作用 的 字符 串 中 ， 最 后 模式 匹配 的 字符 串 左边 的 所 有 内 容 。 初 始 值 为 空 
字符 串 "。 每 次 成 功 匹 配 时 ， 其 属性 值 都 会 随 之 改变 

在 当前 所 作用 的 字符 串 中 ， 最 后 模式 匹配 的 字符 串 右边 的 所 有 内 容 。 初 始 值 为 空 
字符 串 "。 每 次 成 功 匹 配 时 ， 其 属性 值 都 会 随 之 改变 

只 读 属性 ， 如 果 匹 配 模式 中 有 小 括号 包含 的 子 模式 ，$1 一 $9 属性 值 分 别 是 第 1 个 到 
第 9 个 子 模式 所 匹配 到 的 内 容 。 如 果 有 超过 9 个 以 上 的 子 模式 ，$1 一 $9 属性 分 别 对 
$1 一 39 $1~$9 应 最 后 的 9 个 子 模式 匹配 结果 。 在 一 个 匹配 模式 中 ， 可 以 指定 任意 多 个 小 括号 包含 
的 子 模式 , 但 RegExp 静态 属性 只 能 存储 最 后 9 个 子 模式 匹配 的 结果 。 在 RegExp 实 
例 对 象 的 一 些 方法 所 返回 的 结果 数组 中 ， 可 以 获得 所 有 圆 括号 内 的 子 匹 配 结果 


【示例 1】 下 面 示例 演示 了 RegExp 类 型 静态 属性 使 用 , 匹配 字符 串 "JavaScript", 不 区 分 大 小 写 。 


Vars= "JavaScript.not Javascript": 
Vart = /(Java)Script/gi; 


leftContext | 人 


TightContext | $' 


var a =L.exec(s): / 执行 匹配 操作 
alert(RegEXp.inpub: // 返回 字符 串 "JavaScriptnot Javascript" 
alert(RegExp.leftContexb): 


| / 返回 空 字符 串 ， 因 为 第 一 次 匹配 操作 时 ， 左 侧 没有 内 容 
| alert(RegExp rightContext): // 返回 字符 串 "not Javascript" 
| alert(RegExplastMatch: // 返回 字符 串 "JavaScript " 
| alert(RegExp.lastParen): / 返回 字符 串 "Java" 
执行 匹配 操作 之 后 ， 则 各 个 属性 的 返回 值 如 下 。 

| 回 input 属性 实际 上 存储 的 是 被 执行 匹配 的 字符 串 ， 即 整个 字符 串 "JavaScriptnot Javascript" 。 
| 回 leftContext 属性 存储 的 是 执行 第 一 次 匹配 之 前 的 子 字 符 串 ， 这 里 为 空 ， 因 为 在 第 一 次 匹配 的 
| 文本 "JavaScript" 左 侧 为 空 。 而 rightContext 属性 存储 的 是 执行 第 一 次 匹配 之 后 的 子 字 符 串 ， 
即 为 ",not Javascript"。 
回 lastMatch 属性 包含 的 是 第 一 次 匹配 的 子 字符 串 ， 即 为 "JavaScript "。 
回 lastParen 属性 包含 的 是 第 一 次 匹配 的 分 组 ， 即 为 "Java"。 

【示例 2】 下 面 示例 设计 匹配 模式 中 包含 多 个 子 模式 ， 然 后 显示 最 后 一 个 子 模式 所 匹配 的 字符 。 
Var Tt = /(Java)(Script)/gi: 
| var a =r.exec(s): / 执行 匹配 操作 
| alert(RegExp.lastParen): // 返回 字符 串 "Script"， 而 不 再 是 "Java" 
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针对 上 面 示例 也 可 以 这 样 设计 。 
Var s = "JavaScript.not Javascript": 
Var r= /(Java)(Script)/gi: 
var a=r.exec(s); 


alert(RegExp.$ ):; // 返回 字符 串 "JavaScriptnot Javascript" 
alert(RegExp["S ]): / 返回 空 字符 串 

alert(RegExp["$"]): / 返回 字符 串 ".not Javascript" 
alert(RegExp["$&"]); // 返回 字符 串 "JavaScript " 
alert(RegExp["$+"]): // 返回 字符 串 "Java" 


这 些 属性 的 值 都 是 动态 的 ， 每 次 执行 exec0 或 test0 方 法 时 ， 所 有 属性 值 都 会 被 重新 设置 。 | 
【示例 3】 在 下 面 示例 中 ， 比 较 了 第 1 次 执行 匹配 和 第 2 次 执行 匹配 的 静态 属性 值 实时 动态 变化 | 
| 


过 程 
Var s = "JavaScriptnot Javascript"; | 
varr =/Scrip(t)/gi: // 第 一 次 定义 的 匹配 模式 | 
Vara =L.exec(s): / 执行 第 一 次 匹配 | 
alert(RegExp.$ ): // 返回 字符 串 "JavaScriptnot Javascript" | 
alert(RegExp["3$ ]): // 返回 字符 串 "Java" | 
alert(RegExp["$"]): // 返回 字符 串 "not Javascript" | 
alert(RegExp["$&c"]): / 返回 字符 串 "Script" | 
alert(RegExp["$+"]): // 返回 字符 串 "t" | 
varr= /Jav(a)/gi: / 第 二 次 定义 的 匹配 模式 | 
var a =L.exec(s): // 执行 第 二 次 匹配 | 
alert(RegExp.$ ): // 返回 字符 串 "JavaScript.not Javascript" | 
alert(RegExp["$ ]): // 返回 空 字 符 串 | 
alert(RegExp["$"]); / 返回 字符 串 "Scriptnot Javascript" | 
alert(RegExp["$&"]): / 返回 字符 串 "Java" | 
alert(RegExp["$+"]):; // 返回 字符 串 "a" | 


通过 上 面 示例 可 以 看 出 , RegExp 静态 属性 是 公共 的 , 对 于 所 有 正则 表达 式 对 象 来 说 都 可 以 共享 。 


6.4 案例 实战 


下 面 结合 实战 练习 编写 正则 表达 式 解决 实际 问题 。 
6.4.1 匹配 十 六 进 制 颜色 值 


十 六 进 制 颜色 值 字符 串 格式 如 下 。 


#ffbbad 
#c01DF 
#FFF 
#fE 


模式 分 析 如 下 。 
加 ”表示 一 个 十 六 进 制 字符 ， 可 以 用 字符 类 [0-9a-fA-F] 来 匹配 。 
其 中 字符 可 以 出 现 3 或 6 次， 需要 使 用 量词 和 分 支 结构 。 
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使 用 分 支 结构 时 ， 需 要 注意 顺序 。 

实现 代码 如 下 。 
var regex = /#([0-9a-fA-F] {6}|[0-9a-fA-F] {3})/g: 
var string = "#ffbbad #fcO1DF 证 FF #fE":; 
console.log(string.match(regex))://["#ffbbad". "#FcO1DF", "#FFF", "#ffE"] 
可 视 化 解析 如 图 6.1 所 示 。 


RegExp: /#([0-9A-Fa-f]{6}1[0-9A-Fa-f]{3})/g 


6.1 十 六 进 制 颜色 值 匹配 模式 


6.4.2 匹配 时 间 


以 24 小 时 制 为 例 ， 时 间 字 符 串 格式 如 下 。 


2 
02:07 


模式 分 析 如 下 。 

共 四 位 数字 ， 第 一 位 数字 可 以 为 [0-2]。 

当 第 一 位 为 "2" 时 ， 第 二 位 可 以 为 [0-3]， 其 他 情况 时 ， 第 二 位 为 [0-9]。 
回 ”第 三 位 数字 为 [0-53]， 第 四 位 为 [0-9]。 

实现 代码 如 下 。 

var regex = /^([O1][O-9]I[2][0-3]):[0-5][0-9]$/: 

console.log(regex.test("23:59"): /=> tme 

console.log(regex.test("02:07")): /=> true 

如 果 要 求 匹配 "7:9" 格 式 ， 也 就 是 说 时 分 前 面 的 "0" 可 以 省 略 ， 优 化 后 的 代码 如 下 。 
Var regex = /^(0?[0-9]l1[0-9]I[2][0-3]):(0?[0-9]I[1-S][0-9D$/: 

console.log( regex.test("23:59") ); //=> tme 

console.log(regex.test("02:07"));  // => true 

console.log(regex.test("7:9"):  //=> tme 


可 视 化 解析 如 图 6.2 所 示 。 
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RegExp: /X07[0-9]|1[0-9] 1[21[0-3]): (0?[0-9]1[1-5][0-9])$/ 
Group #1 


One of Group #2 


One of | 全 | 
One of One of 


国 
- 国 
3 一 国 


图 6.2 时 间 匹 配 模式 


6.4.3 ”匹配 日 期 


常见 日 期 格式 为 yyyy-mm-dd， 例 如 2018-06-10。 

模式 分 析 如 下 。 

回 年 ， 四 位 数字 即 可 ， 可 用 [0-9]{4} 。 

月 , 共 12 个 月 , 分 "01"、"02"、…、"09" 和 "10"、"11"、"12" 两 种 情况 , 可 用 (0[1-9]I1[0-2])。 
日 ， 最 大 31 天 ， 可 用 (0[1-9]I[12][0-9]l3[01])。 


| 
实现 代码 如 下 。 | 
Var regex = /^[0-9]{4}-(O[1-9]I1[0-2])-(O[1-9]I[ Hella | 
console.log( regex.test("2018-06-10") ): //=> tme | 
可 视 化 解析 如 图 6.3 所 示 。 | 
RegExp: /0-9] {4)-(0[1-9]11[0-2])-(o[1-9]|[121 [0-9]13[0Y)$/ | 
Group 扫 2 | 

Group #1 One of 


oneor 5 图 


o-W (J SE One of: One of: 
One “| 
| times Oneok 


图 63 “日 期 匹配 模式 
6.4.4 匹配 成 对 标签 


成 对 标签 的 格式 如 下 。 

<title> 标 题 文本 </title> 

<p> 段 落 文本 </p> 

模式 分 析 如 下 。 

匹配 一 个 开标 签 ， 可 以 使 用 正则 <[^>]+>。 


ss 
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匹配 一 个 闭 标签 ， 可 以 使 用 <V[^>]+>。 

回 ”要 匹配 成 对 标签 ， 就 需要 使 用 反 向 引用 ， 其 中 开标 签 <[%>]+> 改 成 <([^>]+)>， 使 用 小 括号 的 
目的 是 为 了 后 面 使 用 反 向 引用 ， 闭 标签 使 用 了 反 向 引用 <Wl>。 

[MawD] 表 示 这 个 字符 是 数字 或 者 不 是 数字 ， 因 此 也 就 匹配 任意 字符 。 

实现 代码 如 下 。 

variegex= (ID>[dDjs<WIx/ 

var stringl = "<title> 标 题 文本 </title>"; 

Var string2 = "<p> 段 沙文 本 </p>": 

var string3 = "<div> 非 法 嵌 套 </p>": 

console.log(regex.test(string1)): // true 


console log(regex.test(string2)): // true 
console.log(regex.test(string3)): // false 


6.4.5 匹配 物理 路 径 


物理 路 径 字符 串 格式 如 下 。 

F:\study\javascriptregex\regular expression.pdf 

F:\study\javascript\regex\ 

F:\study\javascript 

F\ 

模式 分 析 如 下 。 

整体 模式 是 “ 盘 符 :文件 夹 \ 文 件 夹 \ 文 件 夹 \”。 

其 中 匹配 "F:w， 需 要 使 用 [a-zA-2Z]:\， 盘 符 不 区 分 大 小 写 。 注 意 ，\ 字 符 需 要 转 义 。 

回 文件 名 或 者 文件 夹 名 ， 不 能 包含 一 些 特殊 字符 ， 此 时 需要 排除 字符 类 [^\*<>|"?\m/] 来 表示 


合法 字符 。 

名 字 不 能 为 空 名 ， 至 少 有 一 个 字符 ， 也 就 是 要 使 用 量词 +。 因 此 匹配 “文件 夹 \'”， 可 用 
[ANw<>|"2w/]+HN。 

“文件 夹 \” 可 以 出 现任 意 次 ， 就 是 ([ 八 :*<>|"?\r\n/]+W)*。 其 中 括号 表示 其 内 部 正则 是 一 个 
整体 。 


路 径 的 最 后 一 部 分 可 以 是 “文件 夹 ”， 没 有 “\”， 因 此 需要 添加 ([:*<>1"?W/]+)?。 
回 ”最 后 拼接 成 一 个 比较 复杂 的 正则 表达 式 。 

实现 代码 如 下 。 

Var regex = /^[a-zA-Z]:\([N\:*<>I"7 n/N "Tm?S/: 
console.log(regex.test("F:\\Javascript\regex\index.html")):// => true 

console.log( regex.test("F:\\avascript\regex\")):  //=> tme 


console log( regex.test("F:\javascript") ): //=> tme 
console.log( regex.test("F:\") ): /=>tme 
可 视 化 解析 如 图 6.4 所 示 。 


.174 . 


Group 寻 Group #2 


One of 
None of None of 
oO- 区- 国 ™ Ne<>lzvwmy Ws 
4 


1 or more times 1 or more times 


0 or more times 


图 6.4 物理 路 径 匹 配 模式 | 
6.4.6 ”货币 数字 的 千 位 分 隔 符 表 示 | 


货币 数字 的 千 位 分 隔 符 格式 ， 如 "12345678" 表 示 为 "12,345,678"。 
【操作 步骤 】 
(1) 根据 千 位 把 相应 的 位 置 蔡 换 成 ""， 以 最 后 一 个 逗号 为 例 ， 解 决 方法 : (?=vd{3}3)。 
var result = "12345678".replace(/(?=\d {3}$)/g. "') 
console.log(result); //=> "12345.678" 
其 中 Q?=d{3}$) 匹 配 “\d{3}$” 前 面 的 位 置 ， 而 “\d{3}$” 匹 配 的 是 目标 字符 串 最 后 3 位 数字 。 
(2) 确定 所 有 的 逗号 。 因 为 逗号 出 现 的 位 置 ， 要 求 后 面 3 个 数字 一 组 ， 也 就 是 “\d{3}” 至 少 出 
现 一 次 。 此 时 可 以 使 用 量词 +: 
var result = "12345678" .replace(/(?=(\d{3})+$)/g, ',) 
console.log(result): /=> "12.345.678" 
(3) 匹配 其 余数 字 ， 会 发 现 问题 如 下 。 


var result = "123456789" .replace(/(?=(\d {3})+$)/g. ") 
console.log(result): //=>",123.456.789" 
因为 上 面 正则 表达 式 ， 从 结尾 向 前 数 ， 只 要 是 3 的 倍数 ， 就 把 其 前 面 的 位 置 蔡 换 成 逗号 。 如 何 解 
决 匹配 的 位 置 不 能 是 开头 。 
(4) 匹配 开头 可 以 使 用 *， 但 要 求 该 位 置 不 是 开头 ， 可 以 考虑 使 用 (?!9， 实 现代 码 如 下 。 


var regex =/(91")(9=0d{3})+S)/e: 
var result = "12345678".replace(regex. '.') 


console.log(result): //=> "12.345.678" 
result = "123456789".replace(regex. ""): 
console.log(result): /1/=> "123.456.789" 


(5) 如 果 要 把 "12345678 123456789" 蔡 换 成 "12,345,678 123,456,789"。 此 时 需要 修改 正则 表达 

式 ， 需 要 把 里 面 的 开头 和 结尾 $ 修 改 成 bg。 实现 代码 如 下 。 

var string = "12345678 123456789", 

regex =/(21\b)(2=(d{3}) +\b)/g: 

var result = string.replace(regex. ',') 

console.log(result); // => "12.345.678 123.456,789" 

其 中 (?N\b) 要 求 当前 是 一 个 位 置 ， 但 不 是 Wb 前 面 的 位 置 ， 其 实 (?!\b) 说 的 就 是 B。 因 此 最 终 正 
则 表达 式 变 成 了 “NBGQ?=Qd{3)t\b)/g”。 
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(6) 进一步 格式 化 。 千 分 符 表 示 法 一 个 常见 的 应 用 就 是 货币 格式 化 。 例 如 : 
1888 
| 格式 化 如 下 。 

$1888.00 

有 了 前 面 的 铺垫， 可 以 很 容易 实现 ， 具 体 代码 如 下 。 


| function format (num) { 

| Tetum num.toFixed(2).replace(\B(?=(\d{3})+\b)/g, ".").replace(/^/, "SS 7: 
}» 

console.log(format(1888)): //=>"$ 1,888.00" 


6.4.7 ”验证 密码 
密码 长 度 一 般 为 6 一 12 位 ， 由 数字 、 小 写字 符 和 大 写字 母 组 成 ,但 必须 至 少 包括 两 种 字符 。 如 果 
| 写成 多 个 正则 表达 式 来 判断 ， 比 较 容易 ， 但 要 写成 一 个 正则 表达 式 就 比较 麻烦 。 
【操作 步 台 】 
| (1) 简化 思路 。 不 考虑 “但 必须 至 少 包 括 两 种 字符 ”条 件 ， 可 以 如 下 所 示 来 实现 。 
| var regex = /^[0-9A-2a-z]{6.12}$/: 
| (2) 判断 是 否 包含 有 某 一 种 字符 。 
| 假设 ， 要 求 必 须 包含 数字 ， 此 时 可 以 使 用 (?=.*[0-9])。 因 此 正则 表达 式 变 成 如 下 。 
Var regex = /(2=.#[0-9])^[0-9A-Za-z]{6.12}$/: 
| (3) 同时 包含 具体 两 种 字符 。 
| 假设 ， 同 时 包含 数字 和 小 写字 母 ， 可 以 用 (?=.*[0-9])(?=.*[a-z])。 因 此 正则 表达 式 变 成 如 下 。 
| var regex 三/(2=.*[0-9])(2= *[a-z])A[0-9A-Za-z]{6.1238/: 


(4) 把 原 题 变 成 下 列 几 种 情况 之 一 。 
| 同时 包含 数字 和 小 写字 母 。 
| 同时 包含 数字 和 大 写字 母 。 
| 回 ”同时 包含 小 写字 母 和 大 写字 母 。 
回 ”同时 包含 数字 、 小 写字 母 和 大 写字 母 。 
| 以 上 4 种 情况 是 或 的 关系 ， 实 际 上 可 以 不 用 第 4 条 ， 最 终 实现 代码 如 下 。 
Var regex = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z)I(?=.*[a-z])(?=.*[AZD)[ 


0-9A-7a-z]{6.12}$/: 

console log( regex.test("1234567") ): // false 全 是 数字 
console log( regex.test("abcdef") ): // false 全 是 小 写字 母 
console.log( regex.test("ABCDEFGH") ); /false 全 是 大 写字 母 


| 

| consolelog( regex.test("ab23C") ): //false 不 足 6 位 

| console.log( regex.test("ABCDEF234") ); /tme 大 写字 母 和 数字 
| console log( regex.test("abcdEF234") ): // true 三 者 都 有 


可 视 化 解析 如 图 6.5 所 示 。 
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于 | 

RegExp: /((?=. *[0-9])(?=. *[a-z])|(?=. *[0-9])(?=. *[A-A)|(?=. *[3-z])(?= *[A4)) A0-9A-2-z ]{6 133/ | 
Group 和 1 | 

| 

| 


Followed by Followed by 


610 12 times 


/ harExceptNe win 于 


0or more times ! 0 or more times 


图 6.5 密码 匹配 模式 | 

具体 解析 如 下 。 | 

上 面 的 正则 看 起 来 比较 复杂 ， 只 要 理解 步骤 (2)， 其 余 就 能 全 部 理解 。 | 

/9=.*[0-9])"[0-9A-Za-z]{6.12}$/ 

对 于 这 个 正则 表达 式 ， 只 需要 和 弄 明 白 (?=.*[0-9]))^ 即 可 。 | 

分 开 来 看 就 是 (?=.*[0-9]) 和 ^。 | 

表示 开头 前 面 还 有 个 位 置 (当然 也 是 开头 ， 即 同一 个 位 置 ， 想 想 之 前 的 空 字符 类 )。 | 

(?=.*[0-9]) 表 示 该 位 置 后 面 的 字符 匹配 .*[0-9]， 即 有 任何 多 个 任意 字符 ， 后 面 再 跟 个 数字 ， 就 是 | 
接 下 来 的 字符 ， 必 须 包 含 两 个 数字 。 | 

也 可 以 这 样 来 设计 :“ 至 少 包含 两 种 字符 ”的 意思 就 是 说 ， 不 能 全 部 都 是 数字 ， 也 不 能 全 部 都 是 | 
小 写字 母 ， 也 不 能 全 部 都 是 大 写字 母 。 | 

那么 要 求 “不 能 全 部 都 是 数字 ”， 实 现 的 正则 表达 式 如 下 。 

var regex = /(?!^[0-9] {6,12}$)"[0-9A-Za-z]{6.12}$/; 

3 种 “都 不 能 ”的 最 终 实现 代码 如 下 。 

var regex = /(?!^[0-9] {6.12}$)(?!^[a-z] {6,12}$)(?!^[A-2]{6,12}$)^[0-9A-2a-z]{6,12}$/; 


console.log( regex.test("ABCDEF234") ): 。”// true 大 写字 母 和 数字 
console log( regex.test("abcdEF234") ): /tme 三 者 都 有 


consolelog( regex.test("1234567") ): // false 全 是 数字 | 
console.log( regex.test("abcdef") ): /false 全 是 小 写字 母 | 
console.log( regex.test("ABCDEFGH") ); /false 全 是 大 写字 母 | 
console log( regex.test("ab23C") ): /false 不 足 6 位 | 


可 视 化 解析 如 图 6.6 所 示 。 
RegExp: /(3 A0-9] {6, 12)$) (7! Aa-z]{6, 12$)(?! AA-A{6 125) A0-9A-2a-z]{6, 125/ 


Not followed by: Not followed by: Not followed by: One of 


6to 12 times 


图 6.6 密码 匹配 模式 
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使 用 函数 


函数 对 任何 一 门 语言 来 说 都 是 核心 的 概念 ， 通 过 函数 可 以 封装 任意 多 条 语句 ， 可 以 在 任 
何 地 方 、 任 何 时 候 调用 执行 。 在 JavaScript 语言 中 ， 函 数 即 对 象 ， 程 序 可 以 随意 操控 它们 
函数 可 以 江 套 在 其 他 函数 中 定义 ,这 样 就 可 以 访问 它们 被 定义 时 所 处 的 作用 城中 的 任何 变量 


函数 给 JavaScript 带 来 了 非常 强劲 的 编程 能 力 


【 学 习 重 点 】 

WI 正确 定义 函数 

WI 灵活 使 用 函数 参数 
MI 党 提 函数 对 象 的 使 用 
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7.1 函数 基础 


函数 就 是 一 段 可 以 反复 调用 的 代码 块 。 函 数 能 接受 输入 的 参数 ， 也 能 返回 一 个 值 ， 不 同 的 参数 会 | 
返回 不 同 的 值 。 下 面 就 来 看 下 函数 的 基本 使 用 。 


7.1.1 声明 函数 


在 JavaSeript 中 ， 定 义 函数 的 方法 有 3 种 ， 首 先 来 看 一 下 如 何 使 用 function 命令 声明 函数 。 

fanetion 命令 声明 的 代码 区 块 ， 就 是 一 个 函数 。function 命令 后 面 是 函数 名 ， 函 数 名 后 面 是 一 对 
小 括号 ， 里 面 是 传 入 函数 的 参数 ， 函 数 体 放 在 大 括号 里 面 。 语 法 格式 如 下 。 

function fonName([args]){ ! 

statements ! 

; | 

funName 是 函数 名 ， 与 变量 名 一 样 都 是 JavaScript 合法 的 标识 符 ， 必 须 遵循 Javaseript 标识 符 命 | 
名 约定 。 在 函数 名 之 后 是 一 个 由 小 括号 包含 的 参数 列表 , 参数 之 间 以 逗号 分 隔 , 函数 的 参数 是 可 选 的 。 
这 些 参数 将 作为 函数 体内 的 变量 标识 符 被 访问 。 调 用 函数 时 ， 用 户 可 以 通过 函数 参数 来 干预 函数 内 部 
代码 的 运行 。 

在 小 括号 之 后 是 一 个 大 括号 分 隔 符 , 大 括号 内 包含 的 语句 就 是 函数 体 结构 的 主要 内 容 。 在 函数 体 
结构 中 ， 大 括号 必 不 可 少 ， 缺 少 了 这 个 大 括号 ，JavaScript 将 会 抛 出 语法 错误 。 

【示例 】function 语句 必须 包含 函数 名 称 、 小 括号 和 大 括号 ， 其 他 的 都 可 省 略 ， 因 此 最 简单 的 函 
数 体 是 一 个 空 函数 。 

function fO { // 空 函 数 

} 


下 面 代码 命 名 了 一 个 print 函数 ， 以 后 使 用 print0 这 种 形式 ， 即 可 调用 相应 的 代码 。 
function print(s) { 
console.log(s):; 
) 
省 略 函 数 名 ， 可 以 定义 匿名 函数 ， 匿 名 函数 一 般 参 与 表达 式 运 算 ， 很 少 单独 存在 。 


fonctionO { // 匿名 空 函 数 


窟 提示: 根据 ECMAScript 规范， 不 得 在 非 函数 代码 决 中 声明 函数 ， 最 常见 的 情况 就 是 和 和 try 语 
身 。 例 如 : 
应 (foo) { 
function x0 f} 


{ 
function x0 他 
} catch(e) { 
console.log(e): 


Bb 


vs 


| 区 .rast 网页 坊 程 愉 入 门 到 精通 (向 课 精 编 版 ) 
上 面 代 码 分 别 在 让 代码 块 和 try 代码 块 中 声明 了 两 个 函数 , 按照 语言 规范 , 这 是 不 合法 的 。 但 是 ， 
实际 情况 是 各 家 浏览 器 往往 并 不 报错 ， 能 够 运行 。 
由 于 存在 函数 名 的 提升 ， 所 以 在 条 件 语句 中 声明 函数 ， 可 能 无 效 ， 这 是 非常 容易 出 错 的 地 方 。 


if (false) { 
function fo 分 
f / 不 报错 


上 面 代 码 的 原始 意图 是 不 声明 函数 f， 但 是 由 于 f 的 提升 ， 导 致 站 语句 无 效 ， 所 以 上 面 的 代码 不 
会 报错 。 要 达到 在 条 件 语 句 中 定义 函数 的 目的 ， 只 有 使 用 函数 表达 式 。 例 如 : 
if (false) { 
var f= function0 他: 


局 
10 // undefined 


7.1.2 ”定义 函数 表达 式 
| 定义 函数 的 第 二 种 方法 就 是 使 用 函数 表达 式 , 或 者 称 为 函数 直接 量 。 函 数 表 达 式 就 是 一 个 匿名 函 
| 数 ， 把 匿名 函数 赋值 给 一 个 变量 ， 即 可 定义 函数 。 例 如 : 


| var print = function(s) { 

| console.log(s); 

| }; 

采用 函数 表达 式 声明 函数 时 ，function 命令 后 面 不 带 有 函数 名 。 如 果 加 上 函数 名 ， 该 函数 名 只 在 
函数 体内 部 有 效 ， 在 函数 体外 部 无 效 。 例 如 : 


varprint = functionxO { 


console.log(typeof x): 
} 
// ReferenceError: x is not defined 
printO // function 


上 面 代码 在 函数 表达 式 中 , 加 入 了 函数 名 x。 这 个 x 只 在 函数 体内 部 可 用 , 指 代 函 数 表达 式 本 身 ， 
其 他 地 方 都 不 可 用 。 这 种 写法 的 用 处 有 两 个 : 一 是 可 以 在 函数 体内 部 调用 自身 :二 是 方便 除 错 ， 除 错 
工具 显示 函数 调用 栈 时 ， 将 显示 函数 名 ， 而 不 再 显示 这 是 一 个 匿名 函数 。 因 此 ， 下 面 的 形式 声明 函数 
也 非常 常见 。 

var f= function f0 他: 


”4 名 注意 : 函数 的 表达 式 需要 在 语句 的 结尾 加 上 分 号 ， 表 示 语句 结束 。 而 函数 的 声明 在 结尾 的 大 括号 
| 后 面 不 用 加 分 号 。 总 的 来 说 ， 这 两 种 声明 函数 的 方式 ， 差 别 很 细微 ， 这 里 可 以 近似 认为 是 
| 等 价 的 。 
| 
| 


内 提示 : JavaScript 引擎 将 函数 名 视 同 变量 名 ， 所 以 采用 fanetion 命令 声明 函数 时 ， 整 个 函数 会 像 
变量 声明 一 样 ， 被 提升 到 代码 头 部 。 所 以 ， 下 面 的 代码 不 会 报错 。 
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f0; 

function f) 他 

表面 上 看 ， 上 面 代码 好 像 在 声明 之 前 就 调用 了 函数 f。 但 是 实际 上 ， 由 于 “变量 提升 ”， 函 数 f 被 | 
提升 到 了 代码 头 部 ， 即 在 调用 之 前 已 经 声明 。 但 是 ， 如 果 采 用 表达 式 赋值 语句 定义 函数 ，JavaScript | 
就 会 报错 。 例 如 : | 


f0:; 

var f= fonction0 {f}; // TypeError: undefined is not a function | 

上 面 的 代码 等 同 于 下 面 的 形式 。 | 
| 
| 


£0; 

f= fonction0 {}; 

上 面 代 码 第 二 行 , 调用 f 时 , f 只 是 被 声明 , 还 没有 被 赋值 ， 等 于 undefined， 所 以 会 报错 。 因 此 ， 
如 果 同 时 采用 fonction 命令 和 赋值 语句 声明 同一 个 函数 ， 最 后 总 是 采用 赋值 语句 的 定义 。 


Varf= fonction0O { 
console.log('1"); 


} 

function f) { 
console.log('2"):; 

E 

f0OV/1 


7.1.3 ”构造 函数 
定义 函数 的 第 三 种 方法 就 是 使 用 Funetion 构造 函数 创建 函数 。 例 如 : 


var add = new Function( 
> 


‘Teturmm Xx+y 


六 
// 等 同 于 
function add(x.y) { 
retum Xx+y: 
} 
在 上 面 代码 中 ，Function 构造 函数 接受 3 个 参数 ， 除 了 最 后 一 个 参数 是 add 函数 的 “函数 体 ”， 
其 他 参数 都 是 add 函数 的 参数 。 参 数 类 型 都 是 字符 串 。 
用 户 可 以 传递 任意 数量 的 参数 给 Function 构造 函数 ,只 有 最 后 一 个 参数 会 被 当 作 函数 体 , 如果 只 
有 一 个 参数 ， 该 参数 就 是 函数 体 。 例 如 : 
Var foo = new Function( 
‘Teturn "hello world™ 


六 
// 等 同 于 
function foo0 { 
Tetum ‘hello world': 
有 
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| 【示例 】 创 建 一 个 空 函 数 结构 体 。 
| var f= new Function0): // 定义 空 函 数 
全 /| 下 面 的 定义 方法 是 等 价 的 : 
var f=new Function("a","b","c","return a+b+c") 


var f= new Function("a.b,c"."return atb+c") 


| var f= new Function("a,b"."c","return a+b+c") 
窟 提示: Function 构造 函数 可 以 不 使 用 new 命 令 来 调用 ， 返 回 的 结果 完全 一 样 

4 注意 : 由 于 这 种 声明 吨 数 的 方式 不 直观 ， 不 推荐 使 用 ， 它 适合 在 动态 创建 函数 的 场景 中 应 用 ， 
加 | 


7.1.4 ”定义 谋 套 函数 


函数 可 以 相互 嵌 套 ， 因 此 可 以 定义 复杂 的 媒 套 结构 函数 。 
【示例 1】 使 用 function 语句 声明 两 个 相互 嵌 套 的 函数 体 结构 。 


| function f(x, y) { 1/ 外 层 函 数 

| function e(a.b) { // 内 层 函 数 

| Teturn a *b; 

| } 

| retum x+y: 

| 

| } 

| 【示例 2】 翌 套 的 函数 只 能 够 在 函数 体内 部 可 见 ， 函 数 外 不 允许 直接 调用 。 
| fonction fey) { 

| function e(a.b) { 

| Teturm a * b; 

| } 

retum e(3.0) +y: // 内 层 函数 参与 表达 式 运算 有 效 
| alert(e(3.6)): / 无 效 的 调用 

| 

| alert(f(3, 6)): // 调用 外 层 函 数 

7.1.5 比较 函数 的 定义 方法 

| 站 


让 使 用 function 语句 、Function0 构 造 函 数 和 函数 直接 量 都 可 以 定义 函数 ， 但 是 3 
种 方法 存在 很 多 差异 ， 特 别 是 作用 域 和 执行 效率 上 差别 很 大 ， 考 虑 到 本 节 为 选 学 内 
容 ， 仅 在 线 呈 现 ， 详 细 说 明 请 扫 码 阅读 。 

| 

| 7.1.6 “函数 的 返回 值 


| 

| 在 函数 体内 ， 使 用 retum 语句 可 以 设置 函数 的 返回 值 ， 一 旦 执行 retum 语句 ， 它 将 停止 函数 的 运 
| 行 ， 并 把 return 关键 字 后 面 的 表达 式 的 运算 值 返回 。 如 果 函数 不 包含 return 语句 ， 则 执行 完 函 数 体内 
| 每 条 语句 后 ， 最 后 返回 undefined 值 。 
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容 提示 : JavaScript 是 一 种 弱 类 型 语言 ， 所 以 函数 对 于 接收 和 输出 数据 都 没有 类 型 限制 ，JavaScript 
也 不 会 自动 检测 输入 和 输出 数据 的 类 型 。 
【示例 1】 下 面 代码 定义 函数 的 返回 值 为 函数 。 
functionfO { 
Tetum function(x, y) { // 返回 值 为 函数 
Tetum x +y; 


b 


【示例 2】 函 数 的 参数 没有 限制 ， 但 是 返回 值 只 能 是 一 个 ， 如 果 要 输出 多 个 值 ， 可 以 通过 数组 或 
对 象 进行 设计 。 
function fO { 
vara=[]: 
a[0] = true; 
a[1] = function(x,y) { 
retum x +y; 


} 
a[2] = 123: 
return a:; / 返回 多 个 值 
| 
在 上 面 代码 中 ， 函 数 返 回 值 为 数组 ， 该 数组 包含 3 个 元 素 ， 从 而 实现 一 个 return 语句 ， 返 回 多 个 
值 的 目的 。 | 
【示例 3】 在 函数 体内 可 以 包含 多 个 return 语句 ， 但 是 仅 能 执行 一 个 return 语句 ， 因 此 在 函数 体 | 
内 可 以 使 用 分 支 结构 或 条 件 结构 决定 函数 返回 值 ， 或 者 使 用 return 语句 提前 终止 函数 运行 。 
function f(x,y) { // 根据 条 件 返 回 值 
/如 果 参 数 为 非 数字 类 型 ， 则 终止 函数 执行 
这 typeofx != "number" || typeofy != "number") return: 
这 x> y) retum x —y: 
if(x <y) retun y — x; 
这 x *y <= 0) return x + y: 


7.1.7 函数 的 参数 
函数 参数 包括 两 种 类 型 : 形 参 和 实 参 。 形 参 就 是 函数 声明 的 参数 变量 ， 它 仅 在 函数 内 部 可 见 , 而 | 
实 参 就 是 实际 传递 的 参数 值 。 
【示例 1】 下 面 代码 定义 一 个 简单 的 函数 。 


function f(a.b) { // 定义 函数 结构 ， 传 递 形 参 a 和 b 
Tetum at+b: 

有 

Var X=1,y=2; // 定义 参数 变量 

alert(f(x.y)): // 调用 函数 并 传递 实 参 


在 上 面 示例 中 , 函数 结构 中 的 变量 a、b 是 形 参 , 而 在 调用 函数 时 向 函数 传递 的 变量 x、y 是 实 参 。 
JavaScript 函数 可 以 包含 零 个 或 多 个 形 参 。 函 数 定义 时 的 形 参 可 以 通过 length 属性 获取 。 
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【示例 2】 针对 上 面 的 函数 ， 使 用 如 下 方法 可 以 获取 它 的 形 参 个 数 。 
| 
| alert(flength): / 返回 2。 获 取 函 数 的 形 参 个 数 
| 


一 般 情况 下 ,函数 的 形 参 和 实 参数 量 应 该 相同 ,但 是 JavaSeript 并 没有 要 求 形 参 和 实 参 必须 相同 ， 
匀 | 在 特 丈 情况 下 ， 函 数 的 形 参 和 实 参数 量 可 以 不 相同 。 


【示例 3】 如 果 函 数 实 参数 量 少 于 形 参数 量 ， 那 么 多 出 来 的 形 参 的 值 默认 为 undefined。 
(nctionlab){ // 定义 函数 ， 包 含 两 个 形 参 
| alert(typeof a); // 返回 number 
alert(typeof b): // 返回 undefined 
DO; / 调用 函数 ， 传 递 一 个 实 参 


【示例 4】 如 果 函 数 实 参数 量 多 于 形 参 数量 ， 那 么 多 出 来 的 实 参 就 不 能 够 通过 形 参 标识 符 访问 ， 
函数 会 忽略 掉 多 余 的 实 参 。 在 下 面 这 个 示例 中 ， 实 参 3 和 4 就 被 忽略 掉 了 。 


fonction(ab) { // 定义 函数 ， 包 含 两 个 形 参 
| alert(a); / 返回 1 

| alert(b): / 返回 2 

| (23.4); // 调用 函数 ， 传 递 4 个 实 参 
| 


在 实际 应 用 中 ,经 常 存在 实 参数 量 少 于 形 参数 量 ,这 是 因为 函数 在 体内 初始 化 形 参 ， 并 设置 了 参 
数 默 认 值 。 在 调用 函数 时 ， 如 果 用 户 不 传递 或 少 传递 参数 ， 则 函数 会 采用 默认 值 。 而 形 参数 量 少 于 实 
参 的 情况 比较 少见 ， 这 种 情况 一 般 发 生 在 参数 数量 不 确定 的 函数 中 。 

【示例 5】 形 参与 函数 体内 使 用 var 语句 声明 的 变量 都 属于 局 部 变量 ， 仅 在 函数 体内 可 见 。 当 私 
有 变量 与 形 参 发 生 冲 突 时 ， 则 私有 变量 拥有 较 大 的 优先 权 。 


i 定义 函数 结构 ， 传 递 形 参 & 

| vara=0: / 声明 私有 变量 a， 初 始 值 为 0 

| Tetum a; 

| 

me 

en) /1 调用 函数 ， 传 递 给 参数 值 为 5， 则 返回 值 为 0 


在 上 面 示例 中 ， 私 有 变量 a 将 覆盖 形 参 变量 a， 最 后 返回 值 为 0， 而 不 是 参数 值 5。 
【拓展 】 

es JavaScript 的 函数 参数 用 法 很 灵活 ， 本 节 介 绍 了 一 些 基 本 用 法 ,限于 篇 幅 , 没有 展开 
线 上 阅读 讲解 ， 如 果 详 细 了 解 请 扫 码 阅读 。 


7.1.8 调用 函数 


函数 在 默认 状态 下 不 会 被 执行 ， 一 般 使 用 小 括号 运算 符 〈0) 来 激活 函数 运行 ， 在 小 括号 运算 符 
| 中 可 以 包含 零 个 或 多 个 参数 ， 参 数 之 间 通 过 逗号 进行 分 隔 。 参 数 也 可 以 是 表达 式 , 通过 运算 产生 一 个 
| 参数 值 。 

每 个 参数 值 被 赋予 函数 声明 时 定义 的 形 参 。 当 实际 参数 (arguments ) 的 个 数 与 形式 参数 (parameters) 
的 个 数 不 匹 配 时 不 会 导致 运行 时 错误 。 如 果实 际 参数 值 过 多 ,超出 的 参数 值 将 被 忽略 。 如 果实 际 参数 
值 过 少 ， 缺 失 的 值 将 会 被 蔡 换 为 undefined。 不 会 对 参数 值 进行 类 型 检查 ， 任 何 类 型 的 值 都 可 以 被 传 

【示例 1】 在 下 面 示例 中 ， 通 过 在 函数 中 调用 函数 的 方法 实现 多 重 调用 ， 即 把 函数 调用 作为 一 个 
表达 式 的 值 直接 作为 参数 进行 传递 ， 这 样 节省 了 两 个 临时 变量 。 
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function f(x.y) { // 定义 函数 | 
Tetum x*y; // 返回 值 | 
} | 
alert(f(fC5,6),f(7.8))): // 返回 1680。 重 复 调用 函数 | 
如 果 按 一 般 过 程 化 设计 ， 则 上 面 代码 可 以 转换 为 : 
function flx,y) { // 定义 函数 
Tetum x*y; / 返回 值 | 
} | 
var a= ft5, 6): / 返回 30， 调 用 函数 | 
var b =f7, 8): // 返回 56， 调 用 函数 | 
alert(f(a, b)): // 返回 1680， 调 用 函数 | 
【示例 2】 如 果 函 数 返 回 值 为 一 个 函数 ， 则 在 调用 时 可 以 使 用 多 个 小 括号 运算 符 反复 调用 。 | 
function f(x, y) { // 定义 函数 | 
return function() { / 返回 函数 类 型 的 数据 | 
Tetum x * y: | 
| 
| 
alert(K7. 8)0): / 返回 值 56， 反 复 调 用 函数 


【示例 3】 在 下 面 代码 中 ， 定 义 函 数 的 返回 值 为 函数 自身 ， 设 计 一 种 递归 返回 函数 自身 的 操作 ， 
这 样 就 可 以 通过 无 数 个 小 括号 运算 符 反复 调用 ， 但 是 最 终 返 回 值 都 是 函数 结构 体 自身 。 


function fO { // 定义 函数 | 

Ietum £; // 返回 函数 自身 | 
bp | 
alerttf000000000000): / 返回 函数 结构 体 


当然 ， 上 述 设 计 方 法 在 实际 开发 中 没有 任何 应 用 价值 ， 不 建议 采用 。 
【示例 4 在 翌 套 函数 中 ，JavaScript 遵循 从 内 到 外 的 原则 就 近 调 用 函数 ， 但 是 不 会 从 外 到 内 调 
用 函数 。 这 样 就 避免 了 嵌 套 函数 中 调用 同名 函数 可 能 引发 的 冲突 。 


function fO { // 顶级 函数 
Tetum 1: | 
} | 
function oO { // 函数 作用 域 | 
retum o0 // 调用 内 部 函数 o | 
function oO { / 函数 内 部 作用 域 | 
retum f0: // 嵌 套 函数 内 部 函数 了 | 
fanction f0 { /1 嵌 套 函数 内 部 函数 了 | 
Tetum 3: | 
} | 
} | 
function f0 { 1/ 嵌 套 函数 | 
Tetum 2: | 
} | 
} | 
alert(f0); // 返回 数值 1 | 
alert(o0): / 返回 数值 3 | 
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| 在 上 面 示例 中 ， 在 全 局 作用 域内 调用 函数 f， 则 将 调用 最 项 级 函数 f， 同 样 在 全 局 作用 域内 调用 
| 函数 o， 将 调用 最 项 级 函数 。。 当 调用 顶级 函数 o 时 ， 激 活 内 部 脚本 并 返回 调用 内 部 函数 o， 继 续 激 
| 活 并 调用 最 里 层 的 函数 f。 如 果 没 有 最 里 层 的 函数 f， 则 将 向 上 搜索 函数 f， 并 将 调用 翌 套 函 数 f， 返 
| 回 数值 >。 如果 还 没有 检索 到 函数 f， 则 将 调用 顶层 函数 f， 最 后 返回 数值 为 1。 


【拓展 】 
JavaScript 允许 在 定义 函数 之 后 ， 立 即 调用 该 函数 。 但 是 要 注意 一 些 问 题 ， 否 则 
会 产生 语法 错误 ， 详 细 说 明 请 扫 码 阅读 。 


线 上 阅读 


7.1.9 函数 作用 域 


JavaScript 把 函数 视 为 一 个 封闭 的 结构 体 ， 与 外 界 完全 独立 ， 在 函数 内 声明 的 变量 、 参 数 、 私 有 
函数 等 对 外 是 不 可 见 的 。 
【示例 1】 对 象 可 以 通过 点 号 运算 符 访问 内 部 成 员 ， 但 是 在 函数 体外 无 法 通过 点 号 运算 符 访问 其 


| 内 部 包含 的 成 员 。 
| function {0 { // 函数 体 
| function eO { // 子 函 数 
| function gO { // 孙 函 数 
Tetum 3; 
| } 
| Var b= true; // 函数 的 变量 成 员 
| var ¢ = function| { // 函数 的 变量 成 员 
retum "c" 
| ! 
| } 
| alert(fe.gO): // 抛 出 错误 
| alert(fcO): / 抛 出 错误 
alert(fb): // 抛 出 错误 


| 在 上 面 示例 中 ， 函 数 f 内 部 的 结构 是 符合 语法 规范 的 ， 但 是 用 户 无 法 通过 点 号 运算 符 来 引用 它 的 
| 成 员 。 如 果 在 对 象 内 部 则 完全 可 以 引用 。 
| 【示例 2】 函 数 作 用 域 通过 return 语句 向 外 界 开放 通道 。 例 如 ， 在 下 面 示例 中 可 以 调用 成 员 函 


J alert(f000): 1/ 返回 3 
一 .186 . 
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在 上 面 示例 中 ， 外 界 无 法 调用 函数 了 部 内 成 员 e， 当 执行 return 语句 后 ， 通 过 返回 值 的 形式 向 外 
界 开发 内 部 函数 e， 人 允许 外 部 调用 。 但 是 对 于 变量 b 和 函数 c 来 说 ， 将 永远 不 会 被 执行。 
【拓展 】 
函数 的 作用 域 是 JavaSeript 的 一 个 重点 和 难点 ， 本 节 限于 篇 幅 没 有 展开 讲解 ， 
如 果 读 者 感 兴趣 ， 可 以 扫 码 了 解 更 多 相关 知识 。 


7.1.10 ”函数 的 标识 符 


在 函数 结构 体系 中 ， 一 般 包含 以 下 类 型 的 标识 符 。 

函数 参数 。 

arguments。 

回 “局 部 变量 。 

回 ”内 部 函数 。 

this 。 

其 中 this 和 arguments 是 系统 默认 标识 符 ， 不 需要 特别 声明 。 这 些 标识 符 在 函数 体内 的 优先 级 是 
(其 中 左 侧 优 先 级 要 大 于 右 侧 ): 

this 一 局 部 变量 一 形 参 一 arguments 一 函数 名 。 

【示例 1】 下 面 示例 将 在 函数 结构 内 显示 函数 结构 的 字符 串 。 


function {0 { // 定义 函数 

alert(f) // 提示 函数 结构 
由 | 
// 调用 函数 ， 返 回 函 数 了 结构 的 字符 串 ， 等 于 ftoStringO0 | 
0 | 
【示例 2】 如 果 在 函数 f 中 定义 形 参 f， 则 同名 情况 下 参数 变量 的 优先 权 会 大 于 函数 的 优先 权 。 | 
function f(D { // 定义 形 参 与 函数 同名 | 
alert(f) // 提示 标识 符 f 的 值 | 
} | 
ftmej: // 返回 tme， 而 不 是 函数 了 的 结构 字符 串 | 
| 
【示例 3】 比 较 形 参与 arguments 属性 的 优先 级 。 | 
function farguments) { // 函数 形 参 名 与 参数 属性 arguments 同名 | 
alert(typeof arguments) // 提示 参数 的 类 型 | 
} | 
fa: / 返回 boolean， 而 不 是 属性 arguments 的 类 型 object | 


上 面 示例 说 明了 形 参 变量 会 优先 于 arguments 属性 对 象 。 
【示例 4】 比 较 arguments 属性 与 函数 名 的 优先 级 。 


function argumentsO { // 定义 函数 名 与 arguments 属性 名 同名 
alert(typeof arguments) // 返回 arguments 的 类 型 
arguments(): // 返回 arguments 属性 的 类 型 object， 而 不 是 函数 的 类 型 function 


上 面 示例 在 JScript 中 会 提示 编译 错误 ， 不 允许 使 用 默认 关键 字 来 定义 标识 符 的 名 称 。 
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【示例 5】 比 较 局 部 变量 和 形 参 变量 的 优先 级 。 


function f(x) { // 定义 普通 函数 
var x= 10; // 定义 局 部 变量 并 赋值 
alertC9: // 显示 变量 x 的 值 
ji 
fCS); // 传递 参数 值 为 5， 返 回 提示 为 10 


| 上 面 示例 说 明 函 数 内 局 部 变量 要 优先 于 形 参 变量 的 值 。 
| 【示例 6】 如 果 局 部 变量 没有 赋值 ， 则 会 选择 形 参 变量 。 例 如 : 


fnction fs) { /定义 普通 函数 

| Var x; // 定义 局 部 变量 

| alert(x): // 显示 变量 x 的 值 

| 国 

6) // 传递 参数 值 为 5， 返 回 提示 为 5 


当局 部 变量 与 形 参 变量 重 名 时 ， 如 果 局 部 变量 没有 赋值 ， 则 形 参 变量 要 优先 于 局 部 变量 。 
【示例 7】 下 面 示例 说 明了 当局 部 变量 与 形 参 变量 混在 一 起 使 用 时 ， 它 们 之 间 存 在 的 微妙 关系 。 


function f(x) { 
Var X=X: // 把 形 参 x 传递 给 局 部 变量 x 
| alert(x): 
| } 
| /1 返回 提示 为 5 
| 


如 果 从 局 部 变量 与 形 参 变量 之 间 的 优先 级 来 看 ， 则 var x = x 左右 两 侧 都 应 该 是 局 部 变量 ， 由 于 x 
| 初始 化 值 为 undefined， 所 以 该 表达 式 就 表示 把 undefined 传递 给 自身 。 但 是 从 上 面 示例 来 看 ， 这 说 明 
| 左 侧 的 是 由 var 语句 声明 的 局 部 变量 ， 而 右 侧 的 是 形 参 变量 。 即 当局 部 变量 没有 初始 化 时 ， 应 用 的 是 
| 形 参 变量 优先 于 局 部 变量 。 
| 


7.2 使 用 arguments 


由 于 JavaScript 允许 函数 有 不 定数 目的 参数 ， 所 以 需要 一 种 机 制 , 可 以 在 函数 体内 部 读 取 所 有 参 
数 ， 这 就 是 arguments 对 象 的 由 来 。 

arguments 对 象 包含 了 函数 运行 时 的 所 有 参数 ，arguments[0] 就 是 第 一 个 参数 ，arguments[1] 就 是 第 
二 个 参数 ， 以 此 类 推 。 这 个 对 象 只 有 在 函数 体内 部 才 可 以 使 用 。 


7.2.1 认识 arguments 对 象 


| arguments 对 象 表示 参数 集合 ， 它 是 一 个 类 数组 ， 拥 有 与 数组 相似 的 结构 ， 可 以 通过 数组 下 标的 
| 形式 访问 函数 实 参 值 ， 但 是 没有 基础 Array 的 原型 方法 。 
【示例 1】 在 下 面 示例 中 ， 函 数 没 有 定义 形 参 ， 但 是 在 函数 体内 通过 arguments 对 象 可 以 获取 传 
递 给 该 函数 的 每 个 实 参 值 。 
function {0 { // 定义 没有 形 参 的 函数 
| for(var i= 0:i< argumentslength: i++) { 
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// 循环 读 取 函数 的 arguments 对 象 | 

alert(arguments[i]); // 显示 指定 下 标的 实 参 的 值 | 

} | 

让 上 
f3.3.6): / 逐个 显示 每 个 传递 的 实 参 


【示例 2】arguments 对 象 仅 能 够 在 函数 体内 使 用 ， 作 为 函数 的 属性 而 存在 。 用 户 可 以 通过 点 运 | 
算 符 访问 arguments 对 象 。 由 于 arguments 对 象 在 函数 体内 是 可 见 的， 也 直接 引用 arguments 对 象 。 
function fO { // 定义 没有 形 参 的 函数 
for(var i= 0:i<fargumentslength: i++) { 
// 循环 读 取 函数 的 arguments 对 象 
alert(arguments[i]); // 显示 指定 下 标的 实 参 的 值 


Bb 
b 
fC3, 3, 6); // 逐个 显示 每 个 传递 的 实 参 
arguments 对 象 是 一 个 类 数组 ， 可 以 使 用 数组 下 标的 形式 访问 每 个 实 参 值 ， 如 arguments[ij， 其 中 
arguments 表示 对 arguments 对 象 的 引用 ， 变 量 i 是 arguments 集合 的 下 标 值 ， 从 0 开始 ， 直 到 
arguments.length。 其 中 length 是 arguments 对 象 的 一 个 属性 ， 表 示 arguments 对 象 包含 的 实 参 个 数 。 
【示例 3】 使 用 arguments 对 象 可 以 随时 编辑 实 参 值 。 在 下 面 示 例 中 使 用 for 循环 遍历 arguments 
对 象 ， 然 后 把 循环 变量 的 值 传 递 给 实 参 ， 以 便 动态 改变 实 参 值 。 
function f) { 
for(var i= 0: i < arguments.length: i++) { 
// 遍历 arguments 对 象 元 素 


arguments[j] =i: // 修改 每 个 实 参 的 值 | 

alert(arguments[i]): // 提示 修改 的 实 参 值 | 

} | 

} | 
f3, 3, 6); / 返回 提示 1.2.3， 而 不 是 3.3.6 


| 
【示例 4】 通 过 修改 arguments 对 象 的 length 属性 值 ， 也 可 以 达到 改变 函数 实 参 个 数 的 目的 。 当 | 
length 属性 值 增 大 时 ， 则 增加 的 实 参 值 为 undefined， 如 果 length 属性 值 减 小 ， 则 会 丢弃 arguments 数 | 
据 集合 后 面 对 应 个 数 的 元 素 。 


Fr | 
arguments.length = 2: // 修改 arguments 对 象 的 length 属性 值 | 
for(var i= 0:i< argumentslength: i++) { | 

alert(arguments[i]): | 
} 

} | 

fl3. 3. 6): /1 返回 提示 3.3 | 

| 
【拓展 】 | 


在 正常 模式 下 ，arguments 对 象 可 以 修改 ， 但 是 在 严格 模式 下 是 不 允许 修 
改 的 ， 另 外 arguments 类 似 数组 ， 但 不 是 数组 ,不 过 用 户 可 以 间接 使 用 数组 方 
法 操作 arguments 对 象 ， 详 细 说 明 请 扫 码 阅读 。 
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7.2.2 使 用 callee 
arguments 对 象 包含 一 个 callee 属性 ， 它 引用 当前 arguments 对 象 所 属 的 函数 ， 使 用 该 属性 可 以 在 


视频 讲解 | 
国 环 。。 画 数 体内 调用 函数 自身 。 在 匿名 函数 中 ，eallee 属性 比较 有 用 ， 利 用 它 可 以 设计 函数 迭代 操作 。 


| 【示例 1】 在 下 面 示例 中 ， 使 用 arguments.callee 获取 匿名 函数 ， 然 后 通过 函数 的 length 属性 获取 
函数 形 参 个 数 ， 最 后 比较 实 参与 形 参 个 数 以 检测 用 户 传递 的 参数 是 否 符合 要 求 。 
| 


| fonction f(xyD { 
| var a = arguments.length: // 获取 函数 实 参 的 个 数 


Var b = arguments.callee.length; // 获取 函数 形 参 的 个 数 


| if(@a=b) { // 如 果 形 参 和 实 参 个 数 不 相 等 ， 则 提示 错误 信息 
| throw new Error(" 传 递 的 参数 不 匹配 "); 
| BD 
clse { // 如 果 形 参 和 实 参数 目 相同 ， 则 返回 它们 的 和 
Ietum x+y+2z; 


! 


} 
alert(f(3, 4, 5)); 


// 返回 值 为 12 

| Function 对 象 的 length 属性 返回 的 是 函数 形 参 个 数 ， 而 arguments 对 象 的 length 属性 返回 的 是 函 
| 数 实 参 个 数 。 
| 【示例 2] 如 果 不 是 匿名 函数 ,arguments.callee 等 价 于 函数 名 , 对 于 上 面 示例 可 以 改 为 如 下 形式 。 
| function f(x.y.z) { 
| Var a = arguments.length: // 获取 函数 实 参 的 个 数 

varb=flength: // 在 函数 体内 通过 函数 名 获取 函数 形 参 的 个 数 
| 让 (at=b{ / 如 果 形 参 和 实 参 个 数 不 相 等 ， 则 提示 错误 信息 
| throw new Error(" 传 递 的 参数 不 匹配 "); 

b 
| elsef // 如 果 形 参 和 实 参 数目 相同 ， 则 返回 它们 的 和 

Tetum x + y+2z: 


} 


alert(f(3, 4. 5)); // 返回 值 为 12 


7.2.3 应 用 arguments 


灵活 使 用 arguments 对 象 ， 可 以 提升 使 用 函数 的 灵活 性 ， 增 强 函数 在 抽象 编程 中 的 适应 能 力 和 纠 
| 错 功能 。 下 面 结合 两 个 典型 示例 展示 arguments 对 象 在 实践 中 的 应 用 。 

【示例 1】 使 用 arguments 对 象 能 够 增强 函数 应 用 的 灵活 性 。 例如 , 如 果 函 数 的 参数 个 数 不 确 定 ， 
或 者 函数 的 参数 个 数 很 多 ， 而 又 不 想 为 每 个 参数 都 定义 一 个 形 参 变量 ,此 时 可 以 省 略 参数 ， 直 接 在 函 
数 体 内 使 用 arguments 对 象 来 访问 调用 函数 的 实 参 值 。 

下 面 示例 定义 一 个 求 平均 值 的 函数 ， 它 借助 arguments 对 象 来 计算 函数 接收 参数 的 平均 值 。 


function avgO { / 求 平均 数 
| varnum=0.1=0: / 声明 并 初始 化 临时 变量 
| for(vari=0:i< arguments.length: i++) { / 遍历 所 有 实 参 


| 这 typeofarguments[i] (= "number") 


// 如 果 参 数 不 是 数值 
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continue: // 则 忽略 该 参数 值 


| 
num += arguments[]: // 计算 参数 的 数值 之 和 | 
HH // 计算 参与 和 运算 的 参数 个 数 | 
} | Ap 
num 上 请] // 求 平均 值 | 4 
Tetum num; // 返 平 均值 | 全 J 
} 
dentevel.2.3.0): 1 2 EE 
alert(ave(1, 2, "3". 4)); // 返回 2.3333333333333335 


【示例 2】 验 证 函数 参数 的 合法 性 。 在 页 面 设计 中 经 常 需要 验证 表单 输入 值 ， 下 面 示例 检测 文本 
框 中 输入 的 值 是 否 为 合法 的 邮箱 地 址 。 
function isEmailO { 

让 (arguments.length>1) throw new Error(" 只 能 够 传递 一 个 参数 "): 
// 检测 参数 个 数 
// 定义 正则 表达 式 | 
var regexp = /MN\w+((-\wt)IO.\w+)) A\@[A-2a-z0-9]+((\.|)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; | 
让 (arguments[0].search(regexp)!= -1) ”// 匹配 实 参 的 值 | 


Tetum true; / 如 果 匹 配 则 返回 true | 

else | 
Tetum false: // 如 果 不 匹 配 则 返回 false | 

} | 
var email = "zhuyinhong@ess7.cn"; // 声明 并 初始 化 邮箱 地 址 字符 串 | 
alert(isEmail(email)); // 返回 true | 


4 注意 : arguments 对 象 不 是 数组 ， 它 有 一 个 length 属性 ， 可 以 通过 [] 操 作 符 来 获取 实 参 值 ， 但 是 
arguments 对 象 并 没有 数组 可 以 使 用 的 pushO0、popO、spliceO 等 方法 。 其 原因 是 arguments 
对 象 的 prototype 指向 的 是 Object.prototype， 而 不 是 Array.prototype。 
【示例 3】 可 以 通过 使 用 arguments 来 模拟 重 载 ， 其 实现 机 制 是 通过 判断 arguments 中 实际 参数 的 
个 数 和 类 型 来 执行 不 同 的 逻辑 。 
function sayHelloO { 


Switch (arguments.length) { 
Case 0: | 
Tetum "Hello": | 
case 1: | 
Tetum "Hello." + arguments[0]: | 
case 2: | 
retum (arguments[1] 一 "cn" ? ”你 好 .": "Hello.") + arguments[0]: | 
下 | 
} | 
SayHello0: // "Hello" | 
sayHello("Alex"): // "Hello. Alex" | 
SayHello("Alex" "cn"): 11 "你 好 ，Alex" | 


【示例 4】callee 是 arguments 对 象 的 一 个 属性 ， 其 值 是 当前 正在 执行 的 function 对 象 。 它 的 作用 
是 使 匿名 function 可 以 被 递归 调用 。 下 面 以 一 段 计 算 辈 波 那 契 序列 中 第 N 个 数 的 值 的 过 程 来 演示 
arguments.callee 的 使 用 。 
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| ¥ 
| function fibonacci(num) { 
Tetum (function(num) { 


全 站 mum = parseInt(num):; 


让 oum< 1]) 


Tetum -1; 
| 
| Tetum 1; 
Tetum arguments.callee(num - 1) + arguments.callee(num — 2); 
Daum); 
b 
fibonacci(100) 


7.3 使 用 Function 


Function 是 JavaScript 内 置 构造 对 象 ， 函数 作为 对 象 来 使 用 , 也 可 以 构造 其 他 对 象 。 同 时 Function 
| 定义 了 多 个 原型 方法 ， 方 便 函数 调用 ， 以 实现 灵活 的 函数 式 编程 。 


73.1 name 属性 


name 属性 返回 紧 跟 在 function 关键 字 之 后 的 函数 名 。 例 如 : 


function f10 f} 

fl.name // fl' 

var f2 = fonction0 {}: 

fname//" 

var f3 = function myNameO 全: 

| f3.name /myName' 

| 在 上 面 代码 中 ， 函 数 的 name 属性 总 是 返回 紧 跟 在 function 关键 字 之 后 的 那个 函数 名 。 对 于 亿 来 
| 说 , 返回 空 字符 串 , 匿名 函数 的 name 属性 总 是 为 空 字符 串 ; 对 于 全 来 说 , 返回 函数 表达 式 的 名 字 ( 真 
| 正 的 函数 名 还 是 名，myName 这 个 名 字 只 在 函数 体内 部 可 用 )。 


【拓展 】 

作为 对 象 ， 用 户 可 以 通过 点 语法 为 函数 定义 静态 属性 或 方法 ， 语 法 格式 如 下 。 
function.property 

function.method 

详细 说 明 请 扫 码 阅读 。 


7.3.2 length 属性 
length 属性 返回 函数 预期 传 入 的 参数 个 数 ， 即 函数 定义 时 的 形 参 个 数 ， 为 只 读 属 性 。 例 如 : 


| fnnction fla. b) {} 
| flength //2 
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在 上 面 代码 中 ， 定 义 了 空 函数 f， 它 的 length 属性 就 是 定义 时 的 参数 个 数 。 不 管 调用 时 输入 了 多 | 
少 个 参数 ，length 属性 始终 等 于 2。 | 
【示例 】length 属性 提供 了 一 种 机 制 ， 判 断定 义 时 和 调用 时 参数 的 差异 ， 以 便 实现 面向 对 象 编程 | 


的 方法 重 载 或 参数 检测 。 | a 

ET 厂 定义 检测 函数 实 参 与 形 参 是 否 一 致 的 功能 函数 Sama 
if (alength (= acallee length) | Note 

// 如 果实 参与 形 参 的 length 属性 值 不 同 ， 则 抛 出 错误 | 
throw new Error(" 参 数 不 一 致 "); ‘ 

} 

function fla, b, c,d) { / 定义 一 个 普通 应 用 函数 ! 
check(arguments); // 调用 函数 check | 
retum (a+b+c+d)/3: / 返回 函数 值 ! 

} 

alert(f(3, 4)); / 抛 出 异常 。 调 用 函数 传递 两 个 参数 


Function 对 象 的 length 属性 可 以 在 函数 体内 外 都 可 以 使 用 ， 而 arguments 对 象 的 length 属性 仅 能 
够 在 函数 体内 使 用 。 


7.3.3 toString() 


函数 的 toString() 方 法 返回 函数 的 源码 。 例 如 : 
function fO { 
a0; 


ftoString0) 

// function fO { 
/a0: 

1/} 


【示例 】 函 数 内 部 的 注释 也 可 以 返回 。 利 用 这 一 点 ， 可 以 变相 实现 多 行 字符 串 。 


var multiline = fonction(fp) { 
var ar = fn.toString().split(\n"): 
Tetum arr.slice(1, arrlength - 1).join(\n"): 


a {/* 
这 是 一 个 

多 行 注释 

*/} 
multiline(D): 
WwW 这 是 个 
// ”多 行 注释 " 


7.3.4 call() 和 apply() 


ECMAScript3 给 Function 的 原型 定义 了 两 个 方法 : Function.prototype.call 和 Function.prototype. 
apply， 其 实 他 们 的 作用 一 样 ， 只 是 传递 的 参数 不 一 样 。 | 
cal0 和 applyO 能 够 将 特定 函数 当 作 一 个 方法 绑 定 到 指定 对 象 上 并 进行 调用 ， 有 具体 用 法 如 下 。 


“193。 


fis 网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版 ) 


function call(thisobj, args...) 

function.apply(thisobj, args) 

| 其 中 参数 thisobj 表示 指定 的 对 象 ， 参 数 args 表示 要 传递 给 被 调用 函数 的 参数 。call0 方 法 只 能 接收 
| 多 个 参数 列表 ， 而 apply0 只 能 接收 一 个 数组 或 者 类 数组 ， 数 组 元 素 将 作为 参数 传递 给 被 调用 的 函数 。 

| 【示例 1】 当 函数 被 绑 定 到 指定 对 象 上 之 后 ， 将 利用 传递 的 参数 执行 函数 ， 并 返回 函数 的 返回 值 。 


function f(x.y) { / 定义 一 个 简单 的 函数 
| Tetum x+y; 
| } 
function o(a.b) { // 定义 一 个 函数 结构 的 伪 对 象 
Tetum a*b; 
mn 
| alert(fcallto3.4) / 返回 7 


| 在 上 面 示例 中 , f 是 一 个 简单 的 函数 ， 而 o 是 一 个 构造 函数 对 象 。 通 过 call0 方 法 把 函数 了 绑 定 到 
| 对 象 。 身上 ， 变 为 它 的 一 个 方法 ， 然 后 动态 调用 函数 f， 同 时 把 参数 3 和 4 传递 给 函数 f， 则 调用 函 


| 数 了 后 返回 值 为 7。 
| 实际 上 ， 上 面 示例 可 以 转换 为 下 面 代码 。 
fnction fy) { // 定义 一 个 简单 的 函数 
Tetum x + y; 

| 
| fnnction o(a.b) { // 定义 一 个 函数 结构 的 伪 对 象 
| Tetum a*b; 

上 
| om = 人 // 为 对 象 o 定义 一 个 方法 m， 该 方法 将 调用 函数 f 
| alert(0.m(3,4)); / 返回 7。 调 用 对 象 o 的 方法 症 
| delete om // 删除 对 象 o 的 方法 匡 
| 


| 【示例 2】apply0 与 call0 方 法 的 功能 和 用 法 都 相同 ， 唯 一 的 区 别 是 它们 传递 给 参数 的 方式 不 同 。 
| 其 中 apply0 方 法 是 以 数组 形式 传递 参数 ， 而 call0 方 法 以 多 个 值 的 形式 传递 参数 。 针 对 上 面 示例 ， 使 
| 用 apply0 方 法 来 调用 函数 f， 则 设计 代码 如 下 所 示 。 

| function f(x.y) { 

| Tetum x+y; 

3 


function o(a.b) { 
Tetum asb: 


} 
alert(f.apply(0.[3.4])): / 返回 7 
【示例 3】 把 一 个 数组 或 类 数组 作为 参数 进行 传递 时 ， 使 用 apply0 方 法 就 非常 便利 。 
| function maxO { 1/ 求 最 大 值 函数 
| varm=NumberNEGAIIVE INFINITY: 
| // 声明 一 个 负 无 穷 大 的 数值 
| for (var i= 0: i < arguments.length: 1++) { 
/ 遍历 函数 所 有 的 实 参 
于 (arguments[ 训 >m) ”// 如 果实 参 值 大 于 变量 m， 则 把 该 实 参 值 赋值 给 mm 
| m= arguments[i]; 
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| 
Tetum mm / 返回 最 大 值 | 
, | 
var a = [23, 45. 2. 46. 62. 45. 56. 63]: | 
// 声明 并 初始 化 数组 | 
var m= max.apply(Object, a): | 一 
// 把 函数 max 绑 定 为 Object 对 象 的 方法 ， 并 动态 调用 
ee / 返回 vote 


在 上 面 示例 中 ， 设 计 定义 一 个 函数 max0， 用 来 计算 所 有 参数 中 最 大 值 参数 。 首 先 通过 apply( 方 | 
法 , 动态 调用 max0 函 数 , 然后 把 它 绑 定 为 Object 对 象 的 一 个 方法 , 并 把 包含 多 个 值 的 数组 传递 给 它 ， 
最 后 返回 经 过 maxO 计 算 后 的 最 大 数组 元 素 。 

如 果 不 使 用 call0 方 法 , 希望 使 用 max0 函 数 找 出 数组 中 最 大 值 元 素 , 就 需要 把 数组 所 有 元 素 全 部 
读 取出 来 ， 再 逐一 传递 给 call0 方 法 ， 显 然 这 种 做 法 是 比较 笨拙 的 。 

【示例 4】 也 可 以 把 数组 元 素 通 过 apply0 方 法 传递 给 Math 的 max0 方 法 来 计算 数组 的 最 大 值 
元 素 。 


Var a = [23, 45, 2, 46. 62, 45, 56. 63]; // 声明 并 初始 化 数组 
var m = Math.max.apply(Object, a); / 调用 系统 函数 max 
alert(m):; / 返回 63 


【示例 5】 使 用 cal0 和 apply0 方 法 可 以 把 一 个 函数 转换 为 指定 对 象 的 方法 ， 并 在 这 个 对 象 上 调 
用 该 方法 。 这 种 行为 只 是 临时 的 ， 函 数 实际 上 并 没有 作为 对 象 的 方法 而 存在 ， 当 函数 被 动态 调用 之 
后 ， 这 个 对 象 的 临时 方法 也 会 自动 被 注销 。 


function f0 分 // 定义 空 函 数 
fcall(Object: / 把 函数 了 绑 定 为 Object 对 象 的 方法 
Objectf0; / 再 次 调用 该 方法 ， 则 返回 编译 错误 


【示例 6] call0 和 apply0 方 法 能 够 动态 改变 函数 内 this 指 代 的 对 象 ， 这 在 面向 对 象 编程 中 非常 有 
用 。 下 面 示例 使 用 call0 方 法 不 断 改变 函数 内 this 指 代 对 象 ， 主 要 通过 变换 call0 方 法 的 第 一 个 参数 值 
来 实现 。 


Var X= "O"; // 定义 全 局 变量 x， 初 始 化 为 字符 o 
function a0 { // 定义 函数 类 结构 a | 
thisx= "a": / 定义 函数 内 局 部 变量 x， 初 始 化 为 字符 a | 
} | 
fnnctionbO { // 定义 函数 类 结构 b | 
this.x = "b"; // 定义 函数 内 局 部 变量 x， 初 始 化 为 字符 b | 
| 
function cO { / 定义 普通 函数 ， 提 示 变量 x 的 值 | 
alert(x): | 
} | 
function {0 { // 定义 普通 函数 ， 提 示 当 前 指针 所 包含 的 变量 x 的 值 | 
alert(this.x): | 


} 
// 返回 字符 o， 即 全 局 变量 x 的 值 。this 此 时 指向 window 对 象 


{0; 
// 返回 字符 o， 即 全 局 变量 x 的 值 。this 此 时 指向 window 对 象 
fcall(window): 
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| // 返回 字符 a， 即 函数 a 内 部 的 局 部 变量 x 的 值 。this 此 时 指向 函数 a 

fcall(new aO): 

/ 返回 字符 b， 即 函数 b 内 部 的 局 部 变量 x 的 值 。this 此 时 指向 函数 b 

fcall(new bO): 

// 返回 undefined， 即 函数 c 内 部 的 局 部 变量 x 的 值 ， 但 是 该 函数 并 没有 定义 x 变量 ， 

// 所 以 返回 没有 定义 。this 此 时 指向 函数 < 

fcall(o); 


| 【示例 7】 在 函数 体内 ，call0 和 apply0 方 法 的 第 一 个 参数 就 是 调用 函数 内 this 的 值 。 为 了 更 好 理 
解 ， 用 户 可 以 看 下 面 示例 。 


| function fy { // 定义 函数 类 结构 

| this.a ="a"; / 定义 成 员 a 并 赋值 ，a 为 属性 
| this.b = fonctionO { / 定义 成 员 b 并 赋值 ，b 为 方法 
| alert("b"); 

| } 

| b 

| fnnction eO { // 定义 函数 

| £.call(this): // 在 函数 体内 动态 调用 函数 f，this 指 代 函 数 e 
| alert(a); // 显示 变量 a 的 值 

me 

| e0 // 返回 字符 串 "a" 


上 面 示例 显示 , 如 果 在 函数 体内 , 使 用 call0 和 apply0 方 法 动态 调用 外 部 函数 , 并 把 call0 和 apply0 
| 方法 的 第 一 个 参数 值 设置 为 关键 字 this, 则 当前 函数 e 将 继承 函数 了 的 所 有 属性 。 即 使 用 call0 和 apply0O 
| 方法 能 够 复制 调用 函数 的 内 部 变量 给 当前 函数 体 。 

| 【示例 8】 在 下 面 示例 中 ， 使 用 apply0 方 法 循环 更 改 当前 this 值 ， 从 而 实现 快速 更 改 函 数 。 

| function r(x) { // 定义 一 个 简单 的 函数 

| Tetum (x); 
| 


} 
// 定义 一 个 稍 复杂 的 函数 ， 该 函数 将 修改 第 一 个 参数 值 ， 并 返回 参数 集合 


function f(x) { 
| x[0] =x[0] + ">"; 
| Tetum x: 
| 国 旺 
| function oO { // 循环 更 改 函 数 r 中 返回 值 
| Var temp =; 
| r=functionO { 
| Tetum temp.apply(this, f(arguments)): 
| function a0 { // 定义 函数 a 

o0: // 调用 函数 o， 修 改 函 数 了 的 结构 ， 即 返回 值 

| alert(r("=")); // 显示 函数 的 返回 值 
| } 
| for (vari=0:i<10:it) { / 循环 调用 函数 a 
| a0: 
| 上 
| 


| 执行 上 面 示 例 ， 会 看 到 提示 信息 框 中 的 提示 信息 不 断 变化 ， 如 图 7.1 所 示 。 该 示例 的 核心 就 在 于 
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函数 o 的 设计 。 在 这 个 函数 中 ， 首 先 使 用 一 个 临时 变量 存储 函数 r。 然 后 修改 函数 r 的 结构 ， 在 修改 
的 函数 结构 中 ， 通 过 调用 apply0 方 法 修改 原来 函数 r 的 指针 指向 当前 对 象 ， 同 时 执行 原 函数 r， 并 


把 执行 函数 他 的 值 传递 给 它 ， 从 而 实现 修改 函数 的 retum 语句 的 后 半 部 分 信息 ， 即 为 返回 值 增加 一 | 
个 前 缀 字符 "="。 这 样 每 次 调用 函数 o。 时 ， 都 会 为 其 增加 一 个 前 缀 字符 "="， 从 而 形成 一 种 动态 的 变化 | 


nn =>>>>>>>>>> 


确定 


图 7.1 apply0 方 法 应 用 示例 效果 


【拓展 】 
下 面 简 单 总 结 一 下 call0 和 apply0 的 主要 作用 ， 请 扫 码 阅读 。 


7.3.5 bind() 


ECMAScript 5 为 Function 增加 了 一 个 原型 方法 bind (Function.prototype.bind)， 用 来 把 函数 绑 定 
到 指定 对 象 上 。 在 绑 定 函 数 中 ，this 对 象 将 解析 为 传 入 的 对 象 ， 具 体 用 法 如 下 。 

function.bind(thisAre[.argl[.are2[.areN]]]) 

参数 说 明 如 下 。 

function: 必需 参数 ， 要 绑 定 的 函数 对 象 。 

回 thisArg: 必需 参数 ， 绑 定 函数 中 this 引用 的 对 象 。 

argl1[,arg2[,argN]]]: 可 选 参数 ， 要 传递 到 新 函数 的 参数 的 列表 。 

bind0 方 法 将 返回 与 function 函数 相同 的 新 函数 ，thisArg 对 象 和 初始 参数 除外 。 

【示例 1】 下 面 示 例 定义 原始 函数 checkNumericRange， 用 来 检测 传 入 的 参数 值 是 否 在 一 个 指定 


范围 内 ， 范 围 下 限 和 上 限 根据 当前 实例 对 象 的 minimum 和 maximum 属性 决定 。 然 后 使 用 bind0 方 法 | 


把 checkNumericRange 函数 绑 定 到 对 象 range 身上 上。 如果 再 次 调用 这 个 新 绑 定 后 的 函数 | 


boundCheckNumericRange 后 ， 就 可 以 根据 该 对 象 的 属性 minimum 和 maximum 来 确定 调用 函数 时 传 
入 值 是 否 在 指定 的 范围 内 。 
Var checkNumericRange = function(value) { 
if (typeof value (=— ‘humber’) 
Tetum false; 
else 
Tetum value >= this.minimum && value <= this. maximum 


» 

var range = {minimum: 10. maximum: 20}: 

Var boundCheckNumericRange = checkNumericRange.bind(range): 
Var result = boundCheckNumericRange(12): 
document.write(result); /ll true 
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六 
【示例 2】 本 示例 在 示例 1 的 基础 上 ,为 originalObject 对 象 定义 了 两 个 上 下 限 属性 ， 以 及 一 个 方 
法 checkNumericRange。 然 后 ， 直 接 调用 originalObject 对 象 的 checkNumericRange 方法 ， 检 测 10 是 
否 在 指定 范围 ， 则 返回 值 为 false， 因 为 当前 minimum 和 maximum 值 分 别 为 50 和 100。 接 着 ， 把 
originalObject.checkNumericRange 方法 绑 定 到 range 对 象 ， 则 再 次 传 入 值 10， 则 返回 值 为 tue， 说 明 


| 在 指定 范围 ， 因 为 此 时 minimum 和 maximum 值 分 别 为 10 和 20。 


Var originalObject = { 
minimum:; 50, 
maximum: 100, 
checkNumericRange: function(value) { 
if (typeof value !: 一 mumber) 
Tetur false; 
else 
Tetum value >= this.minimum && value <= this.maximum:; 
} 
| 
Var result = originalObject.checkNumericRange(10); 
document.write(result); // false 
var range = {minimum: 10, maximum: 20}: 
var boundObjectWithRange = originalObject.checkNumericRange.bind(range); 
var result = boundObjectWithRange(10): 
document.write(result):; /te 


【示例 3】 本 示例 演示 了 如 何 利用 bind0 方 法 为 函数 两 次 传递 参数 值 ， 以 便 实现 连续 参数 求 值 
计算 。 
Var displayArgs = function(vall, val2, val3, val4) { 
document.write(vall + " "+ val2 +" "+ val3 +""+val4): 
} 
Var emptyObject = {}: 
var displayArgs2 = displayArgs.bind(emptyObject 12, "a"): 
displayArgs2("b", "ce"); /12abc 
另外 ，ECMAScript5 为 String 新 增 了 trim0 方 法 ， 该 方法 可 以 从 字符 串 中 移 除 前 导 空格 、 尾 随 空 
格 和 行 终止 符 ， 用 法 如 下 。 
stringObj.trim() 
参数 stringObj 表示 String 对 象 或 字符 串 。trim0 方 法 不 修改 该 字符 串 ， 返 回 值 为 已 移 除 前 导 空 
格 、 尾 随 空 格 和 行 终止 符 的 原始 字符 串 。 移 除 的 字符 包括 空格 、 制 表 符 、 换 页 符 、 回 车 符 和 换行 符 。 
【示例 4】 下 面 示例 演示 如 何 使 用 trim0 方 法 快速 清除 掉 字符 串 首尾 空格 ， 该 方法 在 表单 处 理 中 


| 比较 实用 。 
Var message =" abc def WO 
document write("[" + message.trim() + "]"): // [abc def] 
document.write("<br/>"): 


document.write("length: " + message.trim().length): /7 
【拓展 】 

在 ECMAScript 5 之 前 , 我 们 一 般 自 定义 bind0 绑 定 函数 ,来 解决 此 类 问题 ， 具 
体 说 明 请 扫 码 阅读 。 
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7.4 案例 实战 


下 面 通过 几 个 案例 介绍 函数 应 用 ， 以 提高 使 用 函数 的 灵活 性 。 
7.4.1 函数 调用 模式 


在 JavaScript 中 ， 共 有 4 种 函数 调用 模式 : 方法 调用 、 函 数 调用 、 构 造 器 调用 和 apply 调用 。 这 
些 模式 在 如 何 初始 化 this 上 存在 差异 。 关 于 this 详细 讲解 ， 请 参考 下 面 内 容 。 

【示例 1】 方 法 调用 模式 。 

当 一 个 函数 被 设置 为 对 象 的 属性 值 时 ， 称 之 为 方法 。 当 一 个 方法 被 调用 时 ，this 被 绑 定 到 当前 调 
用 对 象 上 。 


increment : function(inc) { 
this.value += typeof inc 一 一 mumber ? inc: 1; 
} 
} 
obj.incrementO: 
document.writeln(obj.value): /1 
obj.increment(2): 
document. writeln(obj.value): /3 
在 上 面 代码 中 创建 了 obj 对 象 , 它 有 一 个 value 属性 和 一 个 increment0 方 法 。increment0 方 法 接受 
-个 可 选 的 参数 ， 如 果 该 参数 不 是 数字 ， 那 么 默认 使 用 数字 1。 
increment0 方 法 可 以 使 用 this 去 访问 对 象 ， 所 以 它 能 从 对 象 中 取 值 或 修改 该 对 象 。this 到 对 象 的 
绑 定 发 生 在 调用 时 。 这 个 延迟 绑 定 使 函数 可 以 对 this 高 度 复 用 。 通 过 this 可 取得 increment0 方 法 所 属 
对 象 的 上 下 文 的 方法 称 为 公共 方法 。 
【示例 2】 函数 调用 模式 。 
当 一 个 函数 不 是 一 个 对 象 的 属性 时 ， 它 将 被 当 作 一 个 函数 来 调用 。 
var sum = add(3. 4): Vad 


当 函 数 以 此 模式 调用 时 ，this 被 绑 定 到 全 局 对 象 。 这 是 语言 设计 上 的 一 个 缺陷 ， 如 果 语 言 设计 正 
确 ， 当 内 部 函数 被 调用 时 ，this 应 该 仍 绑 定 到 外 部 函数 的 this 变量 。 这 个 设计 错误 的 后 果 是 方法 不 能 
利用 内 部 函数 来 帮助 它 工作 ， 因 为 内 部 函数 的 this 被 绑 定 了 错误 的 值 ， 所 以 不 能 共享 该 方法 对 对 象 的 | 
访问 权 。 | 
解决 方案 : 如 果 该 方法 定义 一 个 变量 并 将 它 赋值 为 this， 那 么 内 部 函数 就 可 以 通过 这 个 变量 访问 | 
this。 按 照 约定 ， 将 这 个 变量 命名 为 that。 | 
var obj={ 
value: 1. 
doub: function| { 
var that = this: 
var helper = fnnctionO { 
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that.value = that.value * 2: 
| » 
| helperO; 
| 


| } 
ABI 


| obj.doubO; 
oa 
| 【示例 3】 构 造 器 调用 模式 。 

| 如 果 使 用 new 运算 符 调用 一 个 函数 , 那么 将 创建 一 个 新 实例 对 象 ,同时 this 将 会 被 绑 定 到 这 个 新 
| 实例 对 象 上 。 注 意 ，new 运算 符 也 会 改变 return 语句 的 行为 。 
| var F = function(string) { 
| this.status = string; 
| }» 
F.prototype.get = fonctionO { 

Tetum this.status; 
}: 


ee f=newF("new object"): 
document.writeln(f.getO): /l/ "new object" 
| 上 面 代码 创建 一 个 名 为 F 的 构 速 函数 ， 此 函数 构建 了 一 个 带 有 status 属性 的 对 象 。 然 后 ， 为 了 所 
| 有 实例 提供 一 个 名 为 get 的 公共 方法 。 最 后 ， 创 建 一 个 实例 对 象 ， 并 调用 get0 方 法 ， 以 读 取 status 属 
| 性 的 值 。 
| 【示例 4】apply0 调 用 模式 。 
apply0 方 法 是 函数 的 一 个 原型 方法 ， 使 用 这 个 方法 可 以 调用 函数 ， 并 修改 函数 体内 的 this 值 。 
Var array = [5. 4]: 
var add = fanction0O { 
vari, sum= 0; 
for (i = 0:; i< arguments.length: i+= 1) { 
sum += arguments[i]: 
和 


Tetum sum; 


| 
| 和 
| var sum = add.apply({}. array): /9 

上 面 代码 构建 一 个 包含 两 个 数字 的 数组 , 然后 使 用 apply() 方 法 调用 add0 函 数 , 将 数组 array 中 的 
元 素 值 相 加 。 

var F = function(string) { 

this.status = string; 

3 
F.prototype.get = functionO { 
| Tetum this.status: 
| 上 
Var obj={ 
| status:'obj' 
| 上 
| var status = F.prototype.get.apply(obj): / "obj" 
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上 面 代码 构建 了 一 个 构造 函数 F， 为 该 函数 定义 了 一 个 原型 方法 get， 该 方法 能 够 读 取 当 前 对 象 
的 status 属性 的 值 。 然 后 定义 一 个 obj 对 象 ， 该 对 象 包含 一 个 status 属性 ， 使 用 apply0 方 法 在 obj 对 
象 上 调用 构造 函数 下 的 get0 方 法 ， 将 会 返回 obj 对 象 的 status 属性 值 。 


7.4.2 ”使 用 闭 包 


闭 包 就 是 一 个 嵌 套 结构 的 函数 。 闭 包 的 结构 有 两 个 特性 。 

封闭 性 : 外 界 无 法 访问 闭 包 内 部 的 数据 ， 如 果 在 闭 包 内 声明 变量 ， 外 界 是 无 法 访问 的 ， 除 非 闭 包 
主动 向 外 界 提供 访问 接口 。 

持久 性 : 一 般 的 函数 ， 调 用 完毕 之 后 ， 系 统 自动 注销 函数 ， 而 对 于 闭 包 来 说 ， 在 外 部 函数 被 调用 
之 后 ， 闭 包 结构 依然 保存 在 系统 中 ， 闭 包 中 的 数据 依然 存在 ， 从 而 实现 对 数据 的 持久 使 用 。 | 

闭 包 的 缺点 : 使 用 闭 包 会 占用 内 存 资源 ， 过 多 地 使 用 闭 包 会 导致 内 存 溢出 等 问题 。 

【示例 1】 下 面 是 一 个 简单 的 闭 包 结构 。 


LE 
1 


Varb=a(]): 
console.log(bO): // 1 | 
首先 ， 在 a 函数 内 定义 了 两 个 变量 ， 一 个 是 存储 参数 ， 另 一 个 是 闭 包 结构 ， 在 闭 包 结构 中 保存 着 | 
b 函数 内 的 a 变量 。 在 默认 情况 下 ， 当 a 函数 调用 之 后 ，a 变量 会 自动 销毁 ， 但 是 由 于 闭 包 的 影响 ， | 
闭 包 中 使 用 了 外 界 的 变量 ， 因 此 a 变量 会 一 直 保存 在 内 存 当中 ， 因 此 变量 a 参数 没有 随 着 a 函数 调用 | 
而 被 释放 ， 因 此 引申 出 闭 包 的 缺点 是 ， 过 多 地 使 用 闭 包 会 占有 内 存 资源 ， 或 内 存 溢出 等 可 能 性 。 
/ 经 典 的 闭 包 实 列 如 下 


function f(x) { // 外 部 函数 

Var a=xX: // 外 部 函数 的 局 部 变量 ， 并 传递 参数 

varb= fanction0 { // 内 部 函数 

retum a; // 访问 外 部 函数 中 的 局 部 变量 | 

lL | 

att; // 访问 后 ， 动 态 更 新 外 部 函数 的 变量 | 

retum b; // 返回 内 部 函数 | 
} | 
varc=f5): / 调用 外 部 函数 并 且 赋 值 | 
console.log(cO):; / 调用 内 部 函数 ， 返 回 外 部 函数 更 新 后 的 值 为 6 


【示例 2】 在 下 面 代码 中 ， 有 两 个 函数 ，f 函数 的 功能 是 : 把 数组 类 型 的 参数 中 每 个 元 素 的 值 分 
别 封装 在 闭 包 结构 中 , 然后 把 闭 包 存储 在 一 个 数组 中 , 并 返回 这 个 数组 , 但 是 在 函数 e 中 调用 函数 f 
并 向 其 传递 一 个 数组 ["a","b","e"]， 然 后 遍历 返回 函数 下 返回 数组 ， 运 行 打印 后 发 现 都 是 c undefined， 
那 是 因为 在 执行 了 函数 中 的 循环 时 ， 虽 然 把 值 保存 在 temp 中 ， 但 是 每 次 循环 后 temp 值 在 不 断 地 变 
化 ， 当 for 循环 结束 后 ， 此 时 temp 值 为 c， 同 时 i 变 为 3， 因 此 当 调 用 时 打印 出 来 的 是 temp 为 3， 
arrs[3] 变 为 undefined; 因此 打印 出 c undefined。 
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| function f(x) { 
| var arrs =[]; 
| for (vari= 0;i<x.length: i++) { 
| Vartemp =X[i]: 
贪 内 | arrs.push(functionO { 


| consolelog(temp +"" +x[i]); // ¢ undefined 
D; 
| Tetum arrs; 
| } 
function eO { 
Var ar = f\["a","b","c"]): 
for (var i= 0,ilen = ar.length; i < ilen; i++) { 


arfi]O; 
§ 
外 
| e0; 
| 解决 闭 包 缺 陷 ， 可 以 在 外 面包 一 层 函 数 ， 每 次 循环 时 ， 把 temp 参数 和 i 参数 传递 进去 。 
| 
| function f2(x) { 
| var arrs =[]; 
| for(vari=0:i<xlength: itH{ 
Var temp =X[]: 
| (function(temp,i) { 
| arrs.push(function0 { 
| console.log(temp +"'+ x[i]): // ¢ undefined 
D); 
Dltemp.i); 
} 
| return arrs; 
| function e20 { 


Var ar = f2(["a","b","c"]); 
for (vari= 0.,ilen = ar.length: i < ilen: i++) { 
ar[i]O: 


【拓展 】 
| 闭 包 是 JavaScript 重要 特性 之 一 ， 在 程序 设计 中 有 着 重要 作用 。 限 于 篇 幅 ， 我 
| 们 仅 重 点 介绍 ， 感 兴趣 的 读者 可 以 扫 码 深入 阅读 。 
线 上 阅读 . 
7.4.3 使 用 this 
回 
视频 讲解 | this 类 似 C 语言 中 的 指针 ， 必 须 位 于 函数 体内 ， 用 来 引用 一 个 调用 函数 的 对 象 。 在 不 同上 下 文 环 


| 境 中 ，this 引用 对 象 不 同 ， 具 体 说 明 如 下 。 

| 1. 全 局 对 象 的 this 

在 全 局 环境 中 ， 指 向 window 对 象 。 例 如 : 
| console log(this): W this 指向 于 window 
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在 setTimeoutO 和 setInterval0 定 时 器 函数 内 部 ，this 指向 window 对 象 。 例 如 : 


console.log(this = 一 window); // true | 1 
»: | 


2 到 Note 
当 作 为 普通 函数 调用 时 , this 总 是 指向 全 局 对 象 。 在 浏览 器 环境 中 , 全 局 对 象 一 般 指 的 是 window。 | 
例如 : 
var name = "Window"; | 
function testO { | 
Tetum this.name; | 


} 
console.log(testO); // window 


| 
3. 作为 对 象 的 方法 调用 | 
当 作为 对 象 的 方法 调用 时 ，this 总 是 指向 调用 它 的 对 象 。 例 如 : | 
var obj={ 
get fonction0 { 
console log(this); W this 指向 obj 对 象 
} 
}; 
obj.getO: // 对 象 方法 调用 
但 是 ， 如 果 按 下 面 方式 调用 ，this 还 是 执行 了 window。 
Var obj={ 
get: function| { 
console.log(this); / window 


} 
B 
Var_get = obj.get: 
getO: 
在 全 局 环境 中 运行 _get0 函 数 ， 实 际 上 调用 它 的 还 是 window 对 象 ， 所 以 this 指向 了 window， 虽 | 
然 get0; 方 法 在 词法 结构 上 属于 obj 对 象 。 
4. 构造 器 调用 
当 使 用 new 运算 符 调用 函数 时 , 该 函数 会 返回 一 个 对 象 , 一 般 情况 下 函数 内 的 this 指向 返回 的 这 
个 对 象 。 例 如 : 
Var Obj = function|O { 
this.name = "newObj": 


$ 
Var test = new Obj0: 

console.log(test.name): // "newObj" 

在 上 面 代码 中 ， 通 过 调用 new Obj0 方 法 ， 返 回 值 保 存 到 test 变量 中 ， 那 么 test 就 是 新 创建 的 对 
象 ， 所 以 内 部 的 this 就 指向 test 对 象 ， 因 此 test.name 就 引用 到 了 内 部 的 this.name。 
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， 座 提示 : this 与 面向 对 象 编程 关系 紧密 ， 关 于 this 更 详细 的 讲解 请 参考 第 10 章 内 容 。 


7.4.4 ”函数 引用 和 函数 调用 


| 当 引 用 函数 时 , 变量 存储 的 是 函数 的 入 口 指针 , 因此 对 于 同一 个 函数 来 讲 ,无 论 多 少 个 变量 引用 ， 
它们 都 是 相等 的 。 对 于 引用 类 型 ， 如 对 象 、 数 组 、 函 数 ， 都 是 比较 内 存 地 址 ， 如 果 内 存 地 址 一 样 ， 说 
| 明 是 同一 个 对 象 。 
对 于 函数 调用 来 说 ， 如 果 返 回 的 是 一 个 对 象 ， 则 每 次 调用 都 被 分 配 一 个 新 的 内 存 地 址 ， 所 以 他 们 
的 内 存 地 址 不 同 。 如 果 返 回 的 是 简单 值 ， 则 比较 的 不 是 内 存 地 址 ， 而 是 比较 值 。 例 如 : 
function FO { 
| this.x=5; 
} 
var a= new F():; 
var b = new FO: 
| console.log(a —— b); // false 
| functionfO { 
| Var X=5; 
Tetum x; 


| vara=£: 

| varb=f£ 

| console.log(a——b): // true 
var a= fO): 

var b=f0: 

console.log(a =—— b): // tme 


| 7.4.5 链 式 调 用 


视频 讲解 | jQuery 的 优势 之 一 就 是 链 式 调用 方法 ， 其 实现 方法 就 是 每 次 调用 一 个 方法 时 ,总 会 返回 this, this 
| 指向 调用 对 象 自身 。 
| 【示例 1】 在 下 面 示例 中 ， 定 义 一 个 简单 的 对 象 ， 每 次 调用 对 象 的 方法 时 ， 都 返回 该 对 象 自身 。 

/ 定义 一 个 简单 的 对 象 ， 每 次 调用 对 象 的 方法 时 ， 都 返回 该 对 象 自 身 

Varobj={ 

| a: function| { 

| console.log("a"): 

| Tetum this: 


} 
b: fonction0 { 

| console.log("b"): 
| Tetum this; 
| > 

| 


»B 
console.log(obj.a0.b0):; // 输出 a 输出 b 输出 this 指向 与 obj 这 个 对 象 


| 【示例 2】 在 下 面 示例 中 ， 分 别 为 String 扩展 了 3 个 方法 : tim0、log0 和 zr0， 其 中 log0 和 a( 方 
， 法 返回 人 都 为 this， 而 trim0 方 法 返回 值 为 修 前 后 的 字符 串 。 这 样 就 可 以 利用 链 式 语法 在 一 行 语句 中 
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快速 调用 这 3 个 方法 。 
// 下 面 通过 Function 扩展 类 型 添加 方法 
Function.prototype.method = function(name,func) { 


让 (tthis prototype[name]) { | #f 
thisprototype[name] = fonc: | 全 向 


Re Note 


String.method('trim' .finction() { 
Tetum this.replace(/^\s+h\s+$/g,"); | 
让 | 
String method(log'function0 { | 
console log(" 链 式 调用 | 
Tetum this: 
D; 
String.method('r',function() { | 
Tetum this.replace(/a/."); | 
| 


D; 
varst=" abc "; 
console.log(str.trim().log0.r0); // 输出 链 式 调用 和 bc 


7.4.6 使 用 函数 实现 历史 记录 


函数 可 以 使 用 对 象 去 记 住 先 前 操作 的 结果 ， 从 而 避免 多 余 的 运算 。 | 视频 讲解 
【示例 】 现 在 测试 一 个 斐 波 那 契 的 算法 ， 可 以 使 用 递归 函数 计算 fibonacci 数列 ， 一 个 fibonacci 
数字 是 之 前 两 个 fibonacci 数字 之 和 ， 最 前 面 的 两 个 数字 是 0 和 1。 
Var count = 0; 
var fibonacci = function(n) { 
count+t; 
retum n <2?n: fibonacci(n-1) + fibonacci(n-2): 


上 

for(vari=0:;i<=10;i+=1){ 
console.log(i + ":" + fibonacci(i)): 

上 

console.log(count): / 453 


可 以 看 到 ， 上 面 的 fibonacci 函数 总 共 调 用 了 453 次 ,for 循环 了 11 次 , 它 自身 调用 了 442 次 ， 如 
果 使 用 下 面 的 记忆 函数 ， 就 可 以 减少 运算 的 次 数 ， 从 而 提高 性 能 。 | 
设计 思路 : 先 使 用 一 个 临时 数组 保存 存储 结果 ， 当 函数 被 调用 时 ， 先 看 是 否 已 经 有 存储 结果 。 如 | 
果 有 的 话 ， 就 立即 返回 这 个 存储 结果 ; 否则 ， 调 用 函数 进行 运算 。 
Var count2 = 0; 
Var fibonacci2 = (fonction0 { 
Var memo = [0.1]:; 
var fib = function(n) { 
Var result = memo[n]: 
Count2++; 


if (typeof result !{— ‘number) { 
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result = fib(n-1) + fib(n-2); 
memo[n] = result: 


DO: 
人 


| console.log(j + ":" + fibonacci20)): 
| } 
consolelog(count2): // 29 
| 这 个 函数 也 返回 了 同样 的 结果 ， 但 是 只 调用 了 函数 29 次 ,循环 了 11 次 ， 即 说 函数 自身 调用 了 
| 18 次 ， 从 而 减少 无 谓 的 函数 的 调用 及 运算 。 
| 下 面 可 以 把 这 个 函数 进行 抽象 化 ， 以 构造 带 记忆 功能 的 函数 。 
Var count3 = 0; 
| Var memoizer = function(memo,formula) { 
| Var recur = function(n) { 
| var result = memo[n]: 
count3++: // 这 句 代码 只 是 说 明 运 行 函数 多 少 次 ， 无 作用 
if (typeof result !— ‘humber) { 
result = formula(recur.n); 
memo[n] = result: 
} 
Teturmn result: 
到 
| Tetum TecuT: 
要 
| Var fibonacci3 = memoizer([0.1].,function(recur.n) { 
| Tetum recur(n-1) + recur(n-2): 
»): 
// 调用 方式 如 下 
| for (var k= 0; k <=10; k+=1) { 
| console.log(k+":"+fibonacci3(k)): 
| h 
console.log(count3): // 29 
| 如 上 封装 memoizer 的 参数 是 实现 某 个 方法 的 计算 公式 , 具体 可 以 根据 需要 手动 更 改 , 其 设计 思 
| 路 就 是 使 用 对 象 去 保存 临时 值 ， 从 而 减少 不 必要 的 取 值 存储 值 的 操作 。 


7.4.7 扩展 Function 类 型 
视频 讲解 | 通过 Objectprototype 添加 原型 方法 ， 可 被 所 有 的 对 象 使 用 。 这 对 函数 、 字 符 串 、 数 字 、 正 则 表 


| 

| 达 式 和 布尔 值 都 适用 。 例 如 ， 现 在 给 Function.prototype 增加 方法 ， 使 该 方法 对 所 有 函数 都 可 用 。 
| Function.prototype.method = function(name.func) { 

| 这 !this.prototype[name]) { 

| this.prototype[name] = fonc: 

| Tetum this: 

| } 
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} 
Number.method('integer' functionO { 
Tetum Math[this < 0 ? 'ceil : ‘floor’](this): 


3 

console.log((-10/3).integerO); // -3 

String.method('trim',function|) { 
Ietum this.replace(/^\s+\s+$/g,"):; 

D: 

console.log(" abc "trimO): // abc 


7.4.8 代码 的 模块 模式 


使 用 函数 和 闭 包 可 以 构建 模块 ， 提 供 接口 ， 这 样 可 以 隐藏 内 部 信息 和 功能 。 使 用 函数 构建 模块 的 
优点 是 : 减少 使 用 全 局 变量 ， 避 免 变 量 冲突 。 
【示例 1 为 String 扩展 一 个 方法 , 该 方法 的 作用 是 寻找 字符 串 中 的 HIML 字符 字体 并 将 其 蔡 换 
为 对 应 的 字符 。 
Function.prototype.method = function(name,func) { 
if (!this.prototype[name]) { 
this.prototype[name] = fonc: 
Teturmn this; 
} 


String.method('deentityify’,function| { 
var entity= { 
quot: ™, 
| 
2 > 


上 
Tetum fonction0O { 
Tetum thisreplace(/&([A&c]+)Jgfunction(aD) { 
Varr=entity[b]: 
Tetum typeofr 一 一 'string 2T: a; 
DD; 


上; 

}0); 

console.log("&It:&quot.&et:".deentityifyO): // <"> 

模块 模式 利用 函数 作用 域 和 闭 包 来 创建 绑 定 对 象 与 私有 成 员 的 关联 , 在 上 面 代码 中 ,deentityifyO 
方法 才 有 权 访 问 字符 实体 表 entity 这 个 数据 对 象 。 

模块 开发 的 一 般 形 式 : 定义 私有 变量 和 函数 的 函数 , 利用 闭 包 创建 可 以 访问 到 的 私有 变量 和 函数 
的 特权 函数 ， 最 后 返回 这 个 特权 函数 ， 或 把 他 们 保存 到 可 以 访问 的 地 方 。 

模块 模式 一 般 会 结合 实例 模式 使 用 。JavaScript 实例 就 是 使 用 对 象 字面 量 表示 法 创建 的 。 对 象 的 
属性 值 可 以 是 数值 或 者 函数 ， 并 且 属 性 值 在 该 对 象 的 生命 周期 中 不 会 发 生变 化 。 | 

【示例 2】 下 面 代码 属于 模块 模式 ， 定 义 了 一 个 私有 变量 name 属性 ， 以 及 一 个 实例 模式 〈 对 象 | 
字面 量 obj)， 并 且 返 回 这 个 对 象 字面 量 obj， 对 象 字 面 量 中 的 方法 与 私有 变量 name 进行 绑 定 。 

/ 经 典 的 模块 模式 

var MODULE = (function0 { 
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Ca 
让 
Var name = "0"; 
| var obj={ 
| setName: function0 { 
| this.name = name: 
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视频 讲解 | 在 页 面 初始 化 时 ， 就 开始 实例 化 类 ， 如 果 在 页 面 中 没有 使 用 这 个 实例 对 象 ， 就 会 造成 一 定 的 内 存 
| 浪费 和 性 能 损耗 。 这 时 可 以 使 用 惰性 实例 化 来 解决 这 个 问题 ,惰性 就 是 把 实例 化 推迟 到 需要 使 用 它 时 


| 才 去 做 ， 做 到 按 需 供应 。 


Var myNamespace = function0 { 
Var Configure = functionO { 
Var privateName = "myName"; 
Var privateGetName = function| { 
Tetum privateName: 


上 
Var privateSetName = function(name) { 
PrivateName = name: 


上 
/ 返回 单 例 对 象 
retum { 
setName: function(name) { 
| PrivateSetName(name); 
| }, 
| getName: fonction0 { 
Tetum privateGetNameO: 
} 
} 


上 

// 存储 Configure 实 列 
Var instance: 

Tetum { 

| init: fanction0 { 

| / 如 果 不 存 在 实 列 ， 就 创建 单 例 实 列 
| 让 (linstance) { 

| instance = Configure(): 


b 
// 创建 Configure 单 例 
for (var key in instance) { 
» 1 if (instance.hasOwnProperty(key)) { 
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this[key] = instance[key]: 


} 
} 


}0; 

/ 调用 方式 

myNamespace.init|; 

var name = myNamespace.getName(); 

console.log(name); // myName 

上 面 是 惰性 化 实 列 代码 ， 它 包括 一 个 单 体 Configure 实 列 ， 直 接 返 回 init 函数 ， 先 判断 该 单 体 是 
否 被 实例 化 ， 如 果 没 有 被 实例 化 ， 则 创建 并 执行 实例 化 并 返回 该 实例 化 ， 如 果 已 经 实例 化 ， 则 返回 现 | 
有 实 列 ， 执 行 完 后 ， 则 销毁 init0 方 法 ， 只 初始 化 一 次 。 


7.4.10 ”分支 函数 


分 支 函数 的 作用 : 解决 兼容 中 让 或 else 的 重复 判断 问题 。 一 般 情 况 下 ， 用 户 常 使 用 和 进行 多 次 | 
判断 来 进行 这 样 做 有 一 个 缺点 ， 每 次 执行 这 个 函数 时 ， 都 需要 进行 站 检测 ， 效 率 不 高 。 现 在 使 
用 分 支 函 数 来 实现 当初 始 化 时 进行 一 些 检测 ， 在 之 后 的 运行 代码 过 程 中 ， 代 码 就 无 须 检测 。 

【示例 1】 分 支 技术 就 可 以 解决 这 个 问题 ， 下 面 以 声明 一 个 XMLHttpRequest 实例 对 象 为 例 进行 
介绍 。 首 先 ， 看 看 传统 的 封装 Ajax 请 求 函数 。 

// 创建 XMLHttpRequest 对 象 

Varxmlhttp: 

function createxmlhttp() { 

if (window.XMLHttpRequest) { 
/IE 7+、 Firefox、 Chrome、Opera、Safari 
xmlhttp=new XMLHttpRequestO: 


} 
else{ 

lIES, IE6 

xmlhttp=new ActiveXObject("Microsoft. XMLHTTP"):; 
} 


【示例 2】 下 面 使 用 分 支 函 数 来 设计 。 


var XHR = (fanction0 { 
Var standard= { 
createXHR: fonction0 { 
Tetum new XMLHttpRequestO: 
b 


上 
Var oldActionXObject = { 
createXHR: fonction0O { 
Tetum new ActiveXObject("Microsof XMLHTTP"): 
} 
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下 
| Var newActionXObject= { 
| createXHR: fanction| { 
| Tetum new ActiveXObject("Msxml2.XMLHTTP"): 
全 A ! 


| 
if (standard.createXHRO) { 

| Jelse { 
try{ 

newActionXObject.createXHRO:; 

retum newActionXObject: 
}catch(e) { 

oldActionXObiject.createXHRO: 

Tetum oldActionXObject; 
| } 
| } 
| )0: 
| console.log(XHR.createXHRO): // xmlHttpRequest 对 象 
| 

从 上 面 例子 可 以 看 出 , 分支 的 设计 原理 : 声明 几 个 不 同名 称 的 对 象 ， 但 是 为 这 些 对 象 都 声明 一 个 
名 称 相同 的 方法 (关键 点 )。 针 对 这 些 来 自 于 不 同 的 对 象 ， 但 是 拥有 相同 的 方法 ， 根 据 不 同 的 浏览 器 
设计 各 自 的 实现 , 接着 开始 进行 一 次 浏览 器 检测 , 并 且 由 经 过 浏览 器 检测 的 结果 来 决定 返回 哪 一 个 对 
象 ， 这 样 不 论 返 回 的 是 哪 一 个 对 象 ， 最 后 名 称 相同 的 方法 都 作为 对 外 一 致 的 接口 。 

这 是 在 JavaScript 运行 期 间 进行 动态 检测 ， 将 检测 的 结果 返回 赋值 给 其 他 的 对 象 ， 并 且 提 供 相同 
| 的 接口 , 这样 储 存 的 对 象 就 可 以 使 用 名 称 相同 的 接口 。 其 实 ,惰性 载 入 函数 跟 分 支 在 原理 上 非常 相近 ， 
| 只 是 在 代码 实现 方面 有 差异 而 已 。 


7 .4.11 “惰性 载 入 函数 


在 Web 开发 中 ， 因 为 浏览 器 之 间 的 实现 差异 ， 一 些 兼 容 性 操作 总 是 不 可 避免 。 例 如 ， 需 要 了 解 
各 浏览 器 对 事件 绑 定 函 数 addEvent 支持 情况 。 
常规 写法 如 下 。 
Var addEvent = function(elem. type. handler) { 
if (window.addEventListener) { 
return elem.addEventListener(type. handler. false): 


| 
| 
| if (window.attachEvent) { 
| Teturm elem_attachEvent('on' + type. handler): 

} 

$s 

| 
| 上 述 缺 点 : 每 次 调用 时 ， 都 会 执行 下 条件 分 支 ， 虽 然 执 行 这 些 站 分 支 开销 不 大 ， 但 可 以 采用 更 
| 有 效 的 方法 避免 这 些 重复 性 的 运算 。 
| 改进 方案 : 先 检测 ， 然 后 记 住 检 测 情况 ， 下 次 就 不 再 重复 检测 。 
var addEvent = (function0 { 
| if (window.addEventListener) { 
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retum finction(elem, type handler) { | 
elem.addEventListener(type, handler false); | 
} | 


} | y 
if (window.attachEvent) { | 贸 | 

Tetum function(elem. type, handleD { | 一 
} 


elemattachEvent(on' + type, handler): | Note 
} 
DO: 


上 述 缺 点 : 不 管 页 面 是 否 需 要 addEvent 函数 ， 每 次 启动 页 面 都 会 执行 一 次 ， 完 全 没有 必要 。 
优化 方案 如 下 。 
var addEvent = function(elem, type. handler) { 
if (window.addEventListener) { 
addEvent = function(elem. type, handler) { | 
elem.addEventListener(type, handler, false): | 
| 


} 
jelse if (window.attachEvent) { 
addEvent = function(elem. type, handler) { 
elem.attachEvent('on' + type, handler); 
} 


} 

addEvent(elem. type, handlenD: 
上 
在 函数 中 先 做 分 支 判断 。 但 是 在 第 一 次 进入 条 件 分 支 之 后 ， 在 函数 内 部 会 重 写 这 个 函数 ， 重 写 之 
后 的 函数 就 是 我 们 期 望 的 addEvent 函数 ， 在 下 一 次 进入 addEvent 函数 时 ，addEvent 函数 中 不 再 存在 
条 件 分 支 语句 。 


7.4.12 ”函数 节 流 


当 一 个 函数 被 频繁 调用 时 ， 如 果 会 造成 很 大 的 性 能 问题 ， 这 个 时 候 可 以 考虑 函数 节 流 ， 降 低 函 数 | 
被 调用 的 频率 。 
函数 节 流 的 设计 原理 : 将 要 执行 的 函数 使 用 setTimeout 延迟 一 段 时 间 执行 。 如 果 该 次 延迟 执行 还 
没有 完成 ， 则 忽略 接 下 来 调用 该 函数 的 请 求 。 
实现 代码 如 下 。 
var throttle = function(fh, interval) { 
var __self = i. / 保存 需要 被 延迟 执行 的 函数 引用 
timer. // 定时 器 
firstTime =tme: ”// 是 否 是 第 一 次 调用 
Tetum functionO { 
Var args = arguments, 
—_ me = this: 
这 (firstTime) { ”// 如 果 是 第 一 次 调用 ， 不 需 延 迟 执行 


— self.apply(_me. args): 
Tetum firstTime = false: 


“2 
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throttle 函数 接受 2 个 参数 ,第 一 个 参数 为 需要 被 延迟 执行 的 函数 ,第 二 个 参数 为 延迟 执行 的 时 间 。 
具体 应 用 如 下 。 
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函数 式 编程 是 把 function 作为 重复 使 用 的 主要 运算 单元 ( 表达 式 ), 使 用 合成 ( compose ) 
和 柯 里 化 ( curry ) 等 作为 主要 运算 方式 ,构建 复杂 的 函数 ; 通过 定义 系列 专注 于 特定 任务 的 
小 函数 ， 然 后 使 用 连续 运算 来 编写 更 复杂 的 程序 。 函 数 式 编程 方法 : 避免 改变 状态 ， 编写 无 
副作用 的 绝 函 数 ， 消 除 循环 ， 支 持 递 归 等 

JavaScript 作为 一 种 典型 的 多 范式 编程 语言 ， 这 两 年 随 着 React 的 火热 ， 函 数 式 编程 的 
概念 也 开始 流行 起 来 ，RxJS、cycleJS、lodashJS 、underscoreJS 等 多 种 开源 库 都 使 用 了 函数 
式 的 将 性。 本章 将 具体 讲解 JavaScript 函数 式 编程 的 基本 技术 和 方法 


【 学 习 重点 】 

MH 了 解 什么 是 函数 式 编程 。 
熟悉 compose 和 curry 运算 
熟悉 函 耶 的 结构 和 范式 

过 提高 阶 西数 和 遂 归 范 数 。 


吾 于 于 
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8.1 函数 式 编 程 概 述 


到 
。 函数 式 编程 是 与 面向 对 象 编程 、 过 程式 编程 等 并 列 的 编程 范式 .其 主要 特征 : 函数 是 第 一 等 公民 。 
强调 将 计算 过 程 分 解 成 可 复 用 的 函数 ， 如 map 和 reduce 方法 结合 而 成 MapReduce 算法 。 


8.1.1 范畴 论 


函数 式 编程 起 源 于 范畴 论 , 范畴 论 是 数学 的 一 个 分 支 .理解 函数 式 编程 的 关键 , 就 是 理解 范畴 论 。 
它 是 一 门 很 复杂 的 数学 ， 认 为 世界 上 所 有 的 概念 体系 ， 都 可 以 抽象 成 一 个 个 的 范畴 。 

所 谓 范畴 ， 就 是 彼此 之 间 存在 某 种 关系 的 概念 事物、 对象 等 。 不 管 什么 东西 ， 只 要 能 找 出 它们 
| 之 间 的 关系 ， 就 能 定义 一 个 范畴 。 
| “范畴 论 认为 ， 同 一 个 范畴 的 所 有 成 员 ， 就 是 不 同 状态 的 “变形 ”。 通 过 “ 态 射 ” 一 个 成 员 可 以 变 
| 形成 另 一 个 成 员 。 
| 。。 既然 范畴 是 满足 某 种 变形 关系 的 所 有 对 象 ， 就 可 以 总 结 出 它 的 数学 模型 。 
| 回 “所 有 成 员 是 一 个 集合 。 
| 外” 变形 关系 是 函数 。 
| 即 范畴 论 是 集合 论 更 上 一 层 的 抽象 ， 简 单 的 理解 就 是 “集合 + 函数 ”理论 上 通过 函数 ,就 可 以 从 
| 范畴 的 一 个 成 员 ， 算 出 其 他 所 有 成 员 。 
| 
| 
| 
| 
| 


可 以 把 范畴 想象 成 是 一 个 容器 ， 里 面包 含 两 样 东西 。 
值 (value) 。 

回 。” 值 的 变形 关系 ， 即 函数 。 

下 面 使 用 代码 定义 一 个 简单 的 范畴 。 

class Category { 


constructor(val) { 
this.val = val: 


| 在 上 面 代码 中 ，Category 是 一 个 类 ， 也 是 一 个 容器 ， 里 面包 含 一 个 值 (this-val) 和 一 种 变形 关系 
| (addone)。 可 以 看 出 ， 这 个 范畴 ， 就 是 所 有 彼此 之 间 相 差 1 的 数字 集合 。 


4 注意 : 后 面 凡是 提 到 容器 的 地 方 ， 全 部 都 是 指 范 时 . 


| 范畴 论 使 用 函数 来 表达 范畴 之 间 的 关系 。 
| ”伴随 着 范畴 论 的 发 展 ， 就 发 展 出 一 整套 函数 的 运算 方法 。 这 套 方法 起 初 只 用 于 数学 运算 ， 后 来 有 
| 人 将 它 在 计算 机 上 实现 了 ， 就 变 成 了 今天 的 函数 式 编程。 
| 本质 上 ,， 函数 式 编程 只 是 范畴 论 的 运算 方法 ， 与 数理 多 辑 、 微 积分 、 行 列 式 等 类 似 ， 都 是 数学 广 
| 法 ， 只 不 过 它 可 以 用 来 编写 程序 。 

| 。。 函数 式 编程 要 求 函 数 必须 是 纯 的 , 不 能 有 副作用 。 因 为 它 是 一 种 纯 数学 运算 , 原始 目的 就 是 求 值 ， 
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不 做 其 他 事情 ， 和 否则 就 无 法 满足 函数 运算 法 则 。 | 
总 之 ， 在 函数 式 编程 中 ， 函 数 就 是 一 个 管道 。 这 头 进去 一 个 值 ， 那 头 就 会 出 来 一 个 新 的 值 ， 没有 | 
其 他 作用 。 | 


8.1.2 一 等 公民 的 函数 


在 很 多 传统 语言 (如 C/C++/Java/C# 等 ) 中， 函数 都 是 作为 二 等 公民 存在 的 ， 用 户 只 能 用 语言 的 Note 
关键 字 声 明 一 个 函数 ， 然 后 调用 它 ， 如 果 需 要 把 函数 作为 参数 传 给 另 一 个 函数 ， 或 者 赋值 给 一 个 本 地 | 
变量 ,或 者 作为 返回 值 ， 就 需要 通过 函数 指针 、 代 理 等 特殊 的 方式 周折 一 番 。 | 
在 JavaScript 中 ,函数 却 是 一 等 公民 ， 它 不 仅 拥有 一 切 传统 函数 的 使 用 方式 (如 声明 和 调用 )， 而 | 
且 可 以 做 到 像 简单 值 一 样 赋值 、 传 参 、 返 回 ， 这 样 的 函数 也 称 之 为 第 一 级 函数 (First-class Function )。 | 
不 仅 如 此 ，JavaScript 中 的 函数 还 充当 了 类 的 构造 函数 的 作用 ， 同 时 又 是 一 个 Function 类 的 实例 。 这 | 
样 的 多 重 身份 让 JavaScript 的 函数 变 得 非常 重要 。 | 
函数 是 “一 等 公民 ”也 就 是 说 函数 与 其 他 数据 类 型 一 样 ， 可 以 存在 数组 中 ， 当 作 参 数 传递 ， 赋 | 

值 给 变量 等 。 | 

| 


8.1.3 纯 函 数 


对 于 函数 式 编 程 来 说 ， 只 有 纯 的 、 没 有 副作用 的 函数 ， 才 是 合格 的 函数 。 

纯 函 数 就 是 ， 对 于 相同 的 输入 ， 永 远 会 得 到 相同 的 输出 ， 而 且 没有 任何 可 观察 的 副作用 《〈 如 发 送 
请 求 、 改 变 DOM 结构 等 )， 也 不 依赖 外 部 环境 的 状态 〈 如 全 局 变量 、DOM 等 )。 函 数 的 输出 完全 由 
函数 的 输入 决定 。 

【示例 1】 在 JavaScript 中 ， 对 于 数组 的 操作 ， 有 些 方 法 是 纯 的 (如 slice)， 有 些 不 是 纯 的 (如 


splice )。 


Var arr = [1.2.3.4.5]: 
/Arrayslice 是 纯 函数 ， 因 为 它 没有 副作用 ， 对 于 固定 的 输入 ， 输 出 总 是 固定 的 


// 这 是 函数 式 | 
arslice(0.3): /=> [1.2.3] | 
am.slice(0.3): /=> [1,2,3] | 
/Armraysplice 是 不 纯 的 ， 它 有 副作用 ， 对 于 固定 的 输入 ， 输 出 不 是 固定 的 | 
// 这 不 是 函数 式 | 
arr.splice(0.3): /=> [1.23] | 
arsplice(0.3): /=> [45] | 
arrsplice(0.3): /= | 

| 


在 函数 式 编程 中 , 不 要 使 用 这 种 会 改变 数据 的 函数 。 应 该 使 用 那 种 可 靠 的 ,每 次 都 能 返回 同样 结 
果 的 函数 ， 而 不 是 像 splice 这 样 每 次 调用 后 都 把 数据 弄 得 一 团 糟 的 函数 。 
【示例 2】 再 来 看 一 个 示例 。 
/ 不 纯 的 
Var min = 21: 
Var checkAge = function(age) { 
Tetum age >= min; 


; 
/ 纯 的 
Var checkAge = function(age) { 
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var min=21: 
| Tetum age >= min: 
| 
会 在 不 纯 的 版 本 中 ，checkAge 函数 的 行为 不 仅 取决 于 输入 的 参数 age， 还 取决 于 一 个 外 部 的 变量 
一 一 minimum， 这 个 函数 的 行为 需要 由 外 部 的 系统 环境 决定 。 对 于 大 型 系统 来 说 ， 这 种 对 于 外 部 状态 的 依 
赖 是 造成 系统 复杂 性 大 大 提高 的 主要 原因 。 
| 容 提示 : 不 纯 函 数 的 副作用 是 指 ， 在 计算 结果 的 过 程 中， 系统 状态 的 一 种 变化 ， 或 者 与 外 部 进行 的 
例如 ， 函 数 包含 下 面 功 能 之 一 。 
函数 更 改 文件 系统 。 
往 数 据 库 插入 记录 。 
发 送 一 个 HTTP 请 求 。 
可 变数 据 。 
打印 输出 ， 如 consolelog。 
获取 用 户 输入 。 
DOM 查询 或 其 他 操作 。 
访问 系统 状态 。 
| 概括 来 讲 ， 只 要 是 跟 函 数 外 部 环境 发 生 的 交互 都 是 副作用 。 当 然 不 是 要 禁止 使 用 一 切 副 作用 ,而 
| 是 说 ， 要 让 它们 在 可 控 的 范围 内 发 生 。 
| 副作用 让 一 个 函数 变 得 不 纯 是 有 道理 的 : 从 定义 上 来 说 ， 人 
相同 的 输出 ， 如 果 函 数 需要 跟 外 部 事物 打交道 ， 那 么 就 无 法 保证 这 一 
| 换 名 话说， 函数 只 是 两 种 数值 之 间 的 关系 : 输入 和 输出 。 尽管 每 个 输入 都 只 会 -个 输出 ， 但 不 
| 同 的 输入 却 可 以 有 相同 的 输出 。 
| 纯 函数 编程 的 优点 简单 概括 如 下 。 
”1. 可 缓存 性 


纯 函 数 总 能 够 根据 输入 来 做 缓存 。 
【示例 3】 实 现 缓存 的 一 种 典型 方式 是 memoize 技术 。 


// 缓存 函数 


因 因 办 因 办 办 办 办 


var cache = {}: // 缓存 对 象 
Tetum functionO { 
| var arg_str = JSON.stringify(arguments): / 转换 为 字符 串 序 列 
| / 如 果 已 经 缓存 ， 则 直接 返回 ， 和 否则 执行 函数 
| cache[arg_str] = cache[arg str] ? cache[arg_str] + "(from cache)': fapply(f arguments); 
Tetum cache[arg_str]: 


| 

| 

| > squareNumber = memoize(function(x) {retum x * x:}); 

| console.log(squareNumber(4)): /16 

| console.log(squareNumber(4)): // 16(from cache) 
| console.log(squareNumber(5)): /25 

| console.log(squareNumber(5)): // 25(from cache) 
| 
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2. 可 移植 
纯 函 数 是 完全 自给 自足 的 ， 它 需要 的 所 有 东西 都 能 轻易 获得 。 


首先 ， 纯 函数 的 依赖 很 明确 ， 因 此 更 易于 观察 和 理解 ， 没 有 偷偷 摸 摸 的 小 动作 。 其 次 ， 这 使 得 用 | 


户 在 阅读 这 种 代码 时 更 容易 ， 一 个 函数 完成 一 个 功能 ， 不 再 依赖 其 他 函数 或 者 变量 。 
3. 可 测试 


纯 函 数 让 测试 更 加 容易 。 因 为 只 要 每 次 输入 相同 ， 纯 函数 将 输出 相同 的 结果 ， 不 需要 多 次 测试 同 
一 个 输入 。 


4. 合理 性 


使 用 纯 函 数 最 大 的 好 处 是 引用 透明 性 。 如 果 一 段 代码 可 以 蔡 换 成 它 执行 所 得 的 结果 ,而 且 是 在 不 
改变 整个 程序 行为 的 前 提 下 蔡 换 的 ， 那 么 这 段 代 码 是 引用 透明 的 。 


由 于 纯 函数 总 是 能 够 根据 相同 的 输入 返回 相同 的 输出 , 所 以 它们 就 能 够 保证 总 是 返回 同一 个 结果 , | 


这 也 就 保证 了 引用 透明 性 。 
5. 并 行 代码 


可 以 并 行 运行 任意 纯 函 数 。 因 为 纯 函 数 根本 不 需要 访问 共享 的 内 存 ， 而 且 根据 其 定义 ， 纯 函数 也 
不 会 因 副 作用 而 进入 竞争 态 。 

并 行 代码 在 服务 端 JavaSeript 环境 ， 以 及 使 用 Web Workers 的 浏览 器 那里 非常 容易 实现 ， 因 为 它 
们 使 用 了 线程 (Thread)。 不 过 出 于 对 非 纯 函数 复杂 度 的 考虑 ,当前 主流 观点 还 是 避免 使 用 这 种 并 行 。 


< 所 注意 : 不 要 滥用 函数 式 编程 或 者 纯 函 数 。 


纯 函 数 有 很 多 优点 ， 但 是 不 要 编写 每 一 个 函数 ， 都 要 求 是 纯 函 数 。 函 数 越 “ 纯 ”， 对 环境 依赖 越 
少 ， 往 往 意味 着 要 输入 更 多 的 参数 。 
【示例 4】 下 面 代码 适合 使 用 纯 函 数 。 
var pureHttpCall = memoize(function(url, params) { 
Tetum function| { return $.getJSON(url, params): } 
D; 


上 面 代码 并 没有 真正 发 送 HTTP 请 求 ， 只 是 返回 了 一 个 函数 ， 当 调用 它 时 才 会 发 请 求 。 这 个 函数 


之 所 以 有 资格 成 为 纯 函数 ， 是 因为 它 总 是 会 根据 相同 的 输入 返回 相同 的 输出 。 给 定 了 url 和 params | 
之 后 , 它 就 只 会 返回 同一 个 发 送 HTTP 请 求 的 函数 。 这 种 技巧 结合 柯 里 化 和 函数 组 合 , 会 使 JavaScript | 


代码 更 清晰 、 可 维护 。 
【示例 35】 下 面 代码 不 适合 使 用 纯 函数 ， 属 于 滥用 函数 式 编程 。 
Var getServerStuff = function(callback) { 
Tetum ajaxCall(function(json) { 
Tetum callback(json): 
D: 
上 
如 果 仔 细 分 析 上 面 代码 ， 它 实际 上 等 价 于 下 面 代码 。 
Var getServerStuff = ajaxCall: 
当 洲 用 函数 式 编程 时 ， 很 可 能 使 得 代码 很 难 懂 。 所 以 ， 代 码 保持 最 直接 简洁 的 状态 ， 尽 量 使 用 纯 
函数 〈 容 易 维护 )、 适 当 情 况 下 使 用 函数 式 编程 〈 容 易 看 懂 )。 


要 人 
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| 81 .4 命令 式 和 声明 式 


命令 式 代码 就 是 ， 通 过 编写 一 条 又 一 条 指令 ， 让 计算 机 执行 一 些 动作 ， 一 般 都 会 涉及 很 多 烦 杂 的 
| 细节。 而 声明 式 代码 就 是 ， 通 过 编写 表达 式 的 方式 来 声明 想 要 做 什么 ， 而 不 是 通过 一 步 一 步 的 指示 ， 


， 代码 更 为 优雅 。 例如 : 


{"CEO":"c","age":42} 


] 

for (var i= 0; i < companies.length; i++){ 
CEOs.push(companies[i].CEO) 

} 

// 声明 式 


Var CEOs = companies.map(function(c){ 
retum c.CEO: 


和 
console.log(CEOs): 


命令 式 的 写法 要 先 实例 化 一 个 数组 ， 然 后 再 对 companies 数组 进行 for 循环 遍历 ， 手 动 命名 、 判 
断 、 增 加 计数 器 ， 虽 然 很 直观 ， 但 这 并 不 是 优雅 的 程序 员 应 该 做 的 。 

声明 式 的 写法 是 一 个 表达 式 ， 如 何 进行 计数 器 选 代 ,， 返回 的 数组 如 何 收集 ， 这 些 细节 都 被 隐藏 起 
来 。 它 指明 的 是 做 什么 ， 而 不 是 怎么 做 。 

除了 更 加 清晰 和 简洁 之 外 ，map 函数 还 可 以 进一步 独立 优化 ， 甚 至 使 用 内 置 map 方法 ， 这 样 主 
要 的 业务 代码 就 无 须 改 动 。 

函数 式 编程 的 一 个 明显 好 处 : 这 种 声明 式 的 代码 ， 对 于 无 副作用 的 纯 函 数 ， 完 全 可 以 不 考虑 函数 
内 部 是 如 何 实现 的 ， 专 注 于 编写 业务 代码 。 而 当 优化 代码 时 ， 只 需要 集中 到 这 些 稳定 、 坚 固 的 函数 内 
部 即 可 ， 不 用 受 具 体 业 务 影 响 。 

相反 ， 不 纯 的 函数 式 代 码 会 产生 副作用 ， 或 者 依赖 外 部 系统 环境 ， 使 用 它们 时 总 是 要 考虑 这 些 不 
干净 的 副作用 。 在 复杂 的 系统 中 ， 这 对 于 程序 员 来 说 是 极 大 的 负担 。 


8.1.5 ”PointFree 风格 


Point Free 是 一 种 代码 风格 ， 这 种 模式 就 是 不 要 命名 转瞬 即 逝 的 中 间 变 量 。 
【示例 1】 在 编写 代码 中 ， 很 多 用 户 喜欢 把 一 些 对象 自 带 方法 转化 成 纯 函 数 。 例 如 


/ 大 写字 符 串 
| vartoUpperCase = function(str) { 
| 本 
| Tetum str.toUpperCaseO: 
| 
| 


» 

/ 把 字符 串 转换 为 数组 
| Var split = function(str, x) { 
| Tetum str.split(x): 
| 国生 


= 
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然后 在 应 用 中 调用 如 下 代码 。 


var f= function(str) { 
var str = str.toUpperCase(): 


Teturn split(str, ",); | 隐 
) | 


console.log(fl"ab,cdefgh"));  // 输出 ["AB""CD" "EF"."GH"] 
在 上 面 函数 中 ， 使 用 str 作为 中 间 变 量 ， 但 是 这 个 中 间 变 量 是 毫 无 意义 的 。 Late 
【示例 2】 下 面 可 以 改造 这 段 代码 。 | 

// 大 写字 符 串 


vartoUpperCase = function(str) { | 
Tetum str.toUpperCase(): | 
| 


} 
// 定义 柯 里 化 函数 ， 把 字符 串 转换 为 数组 
Var split = function(x) { 
Tetum function(str) { | 
Tetum strsplit(x): | 
| 


3»; 


; 在 应 用 中 调用 

var f= compose(split(',"), toUpperCase): 

console.log(f("ab,cd,ef.gh")); 1/ 输出 ["AB"."CD", "EF","GH"] 

在 上 面 代码 中 , 重 写 了 split 函数 ， 因 为 它 包 含 两 个 参数 ， 在 函数 式 运算 中 ,不 能 同时 传递 参数 ， 
否则 就 直接 执行 了 , 无 法 在 表达 式 中 参与 运算 。 通过 让 split 函数 返回 一 个 函数 , 定义 为 柯 里 化 函数 ， 
这 样 可 以 保存 提前 传 入 的 参数 ， 同 时 暂缓 执行 ， 等 表达 式 运算 之 后 再 执行 。 

compose 是 函数 式 编程 的 一 种 基本 运算 形式 ， 与 柯 里 化 运算 一 样 莫 定 了 函数 式 编程 的 基础 。 关 于 
compose 函数 的 详细 代码 请 参考 8.2.2 节 详 细 讲解 ， 其 作用 是 把 多 个 函数 合并 在 一 起 执行 。 这 种 函数 
式 编 程 风 格 能 够 减少 不 必要 的 中 间 变 量 ， 保 持 代 码 的 简洁 和 通用 。 


8.2 ”函数 式 基 本 运算 


函数 式 编程 有 两 个 最 基本 的 运算 : compose (函数 合成 ) 和 curry ( 柯 里 化 )。 
8.2.1 函数 合成 


如 果 一 个 值 要 经 过 多 个 函数 ， 才 能 变 成 另外 一 个 值 ， 就 可 以 把 所 有 中 间 步 骤 合 并 成 一 个 函数 ， 这 
种 运算 就 是 函数 的 合成 (Compose )。 
例如 ， 如 果 义 和 YY 之 间 的 变形 关系 是 函数 fY 和 之 间 的 变形 关系 是 函数 g， 那 么 藕 和 Z 之 
间 的 关系 ， 就 是 g 和 ff 的 合成 函数 g。f。 
合成 两 个 函数 的 代码 实现 如 下 。 
var compose = function(f. g) { 
Tetum function(x) { 
p Tetum f(g(x)): 


} 
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| 函数 的 合成 必须 满足 结合 律 。 例 如 ， 
| composef compose(e, b)) 
。 | | 7 等 局 


国 所 compose(compose 人 避 . 问 
等 同 于 


| 合成 也 是 函数 必须 是 纯 的 一 个 原因 。 因 为 一 个 不 纯 的 函数 ， 无 法 保证 各 种 合成 以 后 ， 它 会 达到 预 
， 期 的 行为 。 

前 面 说 过 ， 函 数 就 像 数据 的 管道 。 那 么 ， 函 数 合成 就 是 将 这 些 管道 连 起 来 ， 让 数据 一 口气 从 多 个 
| 管道 中 穿 过 。 
【示例 1】 我 们 经 常会 见 到 或 编写 如 下 “ 包 菜 式 ”的 多 层 函数 调用 代码 。 
Me 六 
虽然 这 也 是 函数 式 的 代码 , 但 不 是 很 优雅 。 为 了 解决 函数 嵌 套 的 问题 , 需要 用 到 函数 合成 。 例如: 


/ 两 个 函数 合成 

Var compose = function(f. g) { 
Tetum function(x) { 

| Tetum f(g(x)); 

| 上 

| }; 

| // 加 法 运算 


var add = function(x) { 
retum x+ 1; 


} 
| / 乘法 运算 
varmul = function(x) { 
| Tetum x * 5; 


/ 合并 如 法 运算 乘法 运 和 
| compose(mul add)(2): ”// 返回 15 
| 在 上 面 代码 中 ， 定 义 合成 函数 compose( 俗 称 胶水 函数 )， 可 以 把 任何 两 个 纯 函数 粘连 一 起 。 当 
然 也 可 以 扩展 出 组 合 3 个 函数 的 “三 面 胶 ”， 甚 至 “四 面 胶 ” 和 “N 面 胶 ”。 这 种 灵活 的 组 合 可 以 让 我 
们 像 拼 积木 一 样 来 组 合 函 数 式 的 代码 。 

总 之 ，compose 函数 的 作用 就 是 组 合 函数 ， 将 函数 串联 起 来 执行 ， 将 多 个 函数 组 合 起 来 ， 一 个 函 
数 的 输出 结果 是 另 一 个 函数 的 输入 参数 ， 一 旦 第 一 个 函数 开始 执行 ， 就 会 像 多 米 诺 骨 牌 一 样 推导 执 
行 了 。 

【示例 2】 设计 要 输入 一 个 名 字 ， 这 个 名 字 由 firstName、lastName 组 合 而 成 ， 然 后 把 这 个 名 字 全 
部 变 成 大 写 并 输出 ， 如 输入 jack、smith， 就 要 打印 出 HELLO,JACK SMITH'。 考 虑 用 函数 组 合 的 方法 
来 解决 这 个 问题 ， 需 要 两 个 函数 greeting 和 toUpper。 

Var greeting = function(firstName. lastName) { 

Tetum hello. + firstName + '' + lastName: 


} 
‘vartoUpper =fhnction(str) { 


“a 


Tetum strtoUpperCaseO: 
. 
Var fn = compose(toUpper greeting) 
console.log(fn('jack','smith’)) //" HELLO.JACK SMITH 


< 拟 注意 : 使 用 compose 要 注意 以 下 几 点 。 
加 compose 的 参数 是 函数 ， 返 回 的 也 是 一 个 函数 。 


除了 初始 函数 (最 右 侧 的 一 个 ) 外 ， 其 他 函数 的 接受 参数 都 是 上 一 个 函数 的 返回 值 ， 
所 以 初始 函数 的 参数 可 以 是 多 元 的 ， 而 其 他 函数 的 接受 值 是 一 元 的 。 
compsoe 函数 可 以 接受 任意 的 参数 ， 所 有 的 参数 都 是 函数 ， 且 执行 方向 是 自 右 向 左 的 ， 


初始 函数 一 定 放 到 参数 的 最 右 侧 。 


掌握 了 compose 的 这 3 个 基本 特性 ， 就 很 容易 地 分 析出 上 面 示例 的 执行 过 程 。 


(1) 当 执行 PP(jack','smith) 时 ， 初 始 函 数 为 greeting。 
(2) greeting 的 执行 结果 作为 参数 传递 给 toUpper。 
(3) 再 执行 ttUpper， 得 出 最 后 的 结果 。 


如 果 还 想 再 加 一 个 处 理 函 数 , 不 需要 修改 血 , 只 需要 再 执行 - 


只 需要 在 上 面 示例 代码 下 面 继 续 添加 如 下 代码 。 


var trim = function(str) { 
Tetum str.trim(); 
} 
var newFn = compose(trim., fh) 
console.log(newFn('jack', 'smith')) 


可 以 看 出 ,不论 维护 和 扩展 ， 使 用 compose 都 十 分 的 方便 。 
8.2.2 compose 实现 


在 8.2.1 节 ， 主 要 介绍 了 compose 的 运算 原理 ， 并 定制 了 
完善 compose 实现 ， 实 现 无 限 函 数 合成 


设计 思路 : 既然 函数 像 多 米 诺 骨 有 牌 式 的 执行 ， 可 以 使 用 递归 或 迭代 ， 在 函数 体内 不 断 地 执行 
arguments 中 的 函数 ， 将 上 一 个 函数 的 执行 结果 作为 下 一 个 执行 函数 的 输入 参数 。 


下 面 使 用 while 迭代 来 实现 compose， 有 具体 代码 如 下 。 


/ 函数 合成 ， 从 右 到 左 合成 函数 

Var compose = function|O { 
var _arguments = arguments: // 缓存 外 层 参数 
var length =_arguments.length: 。 // 缓存 长 度 


var index = length: // 定义 游标 变量 
// 检测 参数 ， 如 果 存 在 非 函 数 参数 ， 则 抛 出 异常 
while (index—) { 
if (typeof _arguments[index] !— ‘function’) { 
throw new TypeError( 参 数 必须 为 函数 !"); 
} 
varindex=length-1: // 定位 到 最 后 一 个 参数 下 标 


ss 


-个 compose。 例如 , 设计 一 个 trim 


-个 合成 两 个 函数 的 compose， 


/ 如 果 存 在 两 个 及 以 上 参数 ， 则 调用 最 后 一 个 参数 函数 ， 并 传 入 内 层 参数 


// 否则 直接 返回 第 1 个 参数 函数 


var result = length ? _arguments[index].apply(this, arguments): arguments[0]: 


// 迭代 参数 函数 
while (index—) { 


/ 把 右 侧 函 数 的 执行 结果 作为 参数 传 给 左 侧 参数 函数 ， 并 调用 
result = _arguments[index].call(this. result); 


} 
Teturn result; 


} 
// 反 向 函数 合成 ， 即 从 左 到 右 合成 函数 
Var composeLeft = functionO { 


Tetum compose.apply(null, [].reverse.call(areuments)): 
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/ 返回 最 左 侧 参数 函数 的 执行 结果 


在 上 面 实现 代码 中 , compose 实现 是 从 右 到 左 进行 合并 , 也 提供 了 从 左 到 左 的 合成 , 即 composeLeft， 


| 同时 在 compose 体内 添加 了 一 层 函 数 的 校 验 ， 允 许 传递 一 个 或 多 个 参数 。 


下 面 是 具体 应 用 。 


Var greeting = function(firstName, lastName) { 
Tetum hello,' + firstName + " ' + lastName:; 
} 
var toUpper = function(str) { 
Tetum str.toUpperCaseO: 
! 
Var trim = function(str) { 
Tetum str.trimO); 
} 
Var fh = compose(trim, toUpper, greeting); 
console.log(fn('jack’, 'smith")): 
Var fn = compose(trim, compose(toUpper, greeting)): 
console.log(fn('jack’. ‘smith")): 
Var fn = compose(compose(trim. toUpper), greeting): 
console.log(fn('jack’. ‘smith")): 


8.2.3” 还 数 柯 里 化 


| 或 单个 参数 。 


上 面 几 种 组 合 方式 都 可 以 ， 最 后 都 返回 ' HELLO, JACK SMITH '。 


| 【示例 1】 下 面 是 一 个 简单 的 求 和 函数 add0。 


=222。 


器 


在 8.2.1 节 ， 介 绍 了 把 fx) 和 g(x) 合 成 为 fg(x))。 这 种 运算 有 一 个 隐藏 的 前 提 ， 就 是 f 和 g 都 只 能 
接受 一 个 参数 。 如 果 可 以 接受 多 个 参数 ， 如 fx, y) 和 g(a, b, c)， 函 数 合成 就 非常 麻烦 。 

这 时 就 要 用 到 函数 柯 里 化 。 所 谓 柯 里 化 ， 就 是 把 一 个 多 参数 的 函数 ， 转 化 为 单 参数 函数 。 有 了 柯 
里 化 运算 之 后 ， 我 们 就 能 做 到 ， 所 有 函数 只 接受 一 个 参数 。 

函数 柯 里 化 〈Cumy) 的 定义 很 简单 : 传递 给 函数 一 部 分 参数 来 调用 它 ， 让 它 返 
理 剩 下 的 参数 。 即 把 多 参数 的 函数 分 解 为 多 步 操作 的 函数 ， 以 实现 每 次 调用 函数 时 ， 仅 需要 传递 更 少 


一 个 函数 去 处 
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var add = function(x. y) { 
Tetum x +y: 

} 

每 次 调动 add0， 需 要 同时 传 入 两 个 参数 ， 如 果 希 望 每 次 仅 需 要 传 入 一 个 参数 ， 可 以 这 样 进行 柯 | 

里 化 。 | 
/ 柯 里 化 
var add = function(x) { 

Tetum function(y) { 
Ietum x+y 


} 


外 
console.log(add(2)(6)): // 8， 连 续 调用 
varaddl = add(200): 
console.log(add1(2)); /202， 分 步调 用 
函数 add0 接 受 一 个 参数 ， 并 返回 一 个 函数 ， 这 个 返回 的 函数 可 以 再 接受 一 个 参数 ， 并 返回 两 个 
参数 之 和 。 
事实 上 ， 柯 里 化 是 一 种 “ 预 加 载 ” 函 数 的 方法 ， 通 过 传递 较 少 的 参数 ， 得 到 一 个 已 经 记 住 了 这 些 
参数 的 新 函数 ， 某 种 意义 上 讲 ， 这 是 一 种 对 参数 的 “缓存 ”， 是 一 种 非常 高 效 的 函数 式 运算 方法 。 柯 
里 化 在 DOM 的 回调 中 非常 有 用 。 
【示例 2】 设 计 一 个 柯 里 化 函数 。 
function curry(fp) { 
/ 把 第 2 个 及 后 面 的 参数 转换 为 数组 
Var firstArgs = Array.prototype.slice.call(arguments. 1): 
ITetum function| { 
// 把 所 有 参数 转换 为 数组 
Var secondArgs = Array.prototype.slice.call(areuments): 
/ 合并 参数 


Var finalArgs = firstArgs.concat(secondArgs): 
// 动态 调用 参数 函数 ， 并 传 入 全 部 参数 值 ， 返 回 函 数 的 值 
return fh.apply(null, finalArgs): 

上 


} 

curry 函数 的 主要 功能 就 是 将 被 返回 的 函数 的 参数 进行 整理 合并 。 为 了 获取 第 一 个 参数 后 的 所 有 
参数 ,在 arguments 对 象 上 动态 调用 了 slice0 方 法 ,并 传 入 1, 表示 被 返回 的 数组 的 第 一 个 元 素 应 该 是 
第 二 个 参数 。 

下 面 是 具体 的 应 用 。 


function add(numl, num2) { 
Tetum numl + Dum2: 


} 

Var newAdd = curry(add., 5): 

alert(newAdd(6)):// 11 

在 curry 函数 的 内 部 ， 私 有 变量 frstArgs 就 相当 于 一 个 存储 器 ， 用 来 暂时 存储 在 调用 curry 函数 
时 所 传递 的 参数 值 ， 这 样 再 跟 后 面 动态 创建 函数 调用 时 的 参数 合并 并 执行 ， 就 得 到 了 一 样 的 效果 。 


ds 
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| x 
| hp 
| 函数 柯 里 化 的 基本 方法 和 函数 绑 定 是 一 样 的 : 使 用 一 个 闭 包 返回 一 个 函数 。 两 者 的 区 别 在 于 ， 当 
| 柯 里 化 函数 被 调用 时 ， 返 回 函数 还 需要 传 入 参数 。 下 面 是 函数 绑 定 的 方法 实现 。 

2 | function bind(fn. context) { 
仿 F | / 把 第 3 个 及 后 面 的 参数 转换 为 数组 
a Var firstArgs = Array.prototype.slice.call(areuments, 2); 


| Tetum function(O) { 
1 把 所 有 参数 转换 为 数组 


| Var secondArgs =Arrayprototype.slice.call(arguments): 

/ 合并 参数 

Var finalArgs = firstArgs.concat(secondArgs): 

/ 在 指定 上 下 文 对 象 上 动态 调用 参数 函数 ， 并 传 入 全 部 参数 值 ， 返 回 函数 的 值 
Tetum fh.apply(context, finalArgs): 


8.2.4 “curry 实现 


8.2.3 节 介绍 了 curry 功能 的 雏形 ， 适 应 能 力 还 比较 弱 ， 本 节 将 在 此 基础 上 完善 curry 实现 。 
设想 curry 可 以 接受 一 个 函数 ， 即 原始 函数 ， 返 回 的 也 是 一 个 函数 ， 即 柯 里 化 函数 。 这 个 返回 的 
| 柯 里 化 函数 在 执行 的 过 程 中 , 会 不 断 地 返回 一 个 存储 了 传 入 参数 的 函数 , 直到 触发 了 原始 函数 执行 的 
条 件 。 

例如 ， 在 8.2.3 节 示例 中 ， 我 们 设计 一 个 add0 函 数 ， 计 算 两 个 参数 之 和 。 


var add = function(x, y) { 
retum Xx+y: 


| 
| 柯 里 化 函数 

Var curryAdd = curry(add) 

这 个 add 需要 两 个 参数 ， 但 是 执行 curryAdd 时 ， 可 以 传 入 更 少 的 参数 ， 当 传 入 的 参数 少 于 add 
需要 的 参数 时 ，add0 函 数 并 不 会 执行 ，curryAdd 就 会 将 这 个 参数 记录 下 来 ,并 且 返 回 另 外 一 个 函数 ， 
这 个 函数 可 以 继续 执行 传 入 参数 。 如 果 传 入 参数 的 总 数 等 于 add 需要 参数 的 总 数 ， 就 执行 原始 参数 ， 
返回 想 要 的 结果 。 

curry 实现 代码 如 下 。 

function curry(fh) { 

var_argLen = fn.length: / 记录 原始 函数 的 形 参 个 数 
/cuny 函数 
function wrapO { 
var _args = [].slice.call(arguments); // 把 传 入 参数 转换 为 数组 
| // 参数 处 理 函数 
| function actO { 
| / 把 当前 参数 转换 为 数组 ， 与 前 面 参数 进行 合并 
_args=_args.concat([].slice.call(areuments)): 
| 7 如 果 传 入 参数 总 和 大 于 等 于 原始 参数 的 个 数 ， 触 发 执行 条 件 
| f(argslength >— areLen) { 
| / 执行 原始 函数 ， 并 把 每 次 传 入 参数 传 入 进去 ， 返 回执 行 结果 ， 停 止 curry 


.224 . 
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Tetum fn.apply(null,_args): | 
} | 
Tetum arguments.callee: ! 


} | A 
/ 如 果 传 入 参数 大 于 等 于 原始 函数 的 参数 个 数 ， 即 触发 了 执行 条 件 | 全 | 
if (argsength >— areLen) { | 
// 执行 原始 函数 ， 并 把 每 次 传 入 参数 传 入 进去 ， 返 回执 行 结果 ， 停 止 camry 
| te 


局 
/ 定义 处 理 函 数 的 字符 串 表示 为 原始 函数 的 字符 串 表示 
acttoString = function0 { 

Tetum fh.toStringO:; 


} 
Tetum act: // 返回 处 理 函 数 


BD 
ITetum wrap;// 返回 curry 函数 
应 用 示例 如 下 。 
/ 求 和 函数 ， 最 低 3 个 参数 ， 最 长 参数 不 限 
varabc= function(a,  b.c) { 
// 把 参数 转换 为 数组 ， 然 后 调用 数组 的 reduce 方法 
/ 和 迭代 所 有 参数 值 ， 返 回 最 后 汇总 的 值 
Tetum [].slice.call(arguments).reduce(function(a.b) { 
// 如 果 元 素 的 值 为 数值 ， 则 参与 求 和 运算 ， 否 则 设置 为 0， 跳 过 非 数 字 的 值 
retum (typeof a — "number" ? a: 0) + (typeofb 一 "number" ? b: 0): 


) | 
} | 
// 柯 里 化 函数 | 
Var curried = curry(abc) | 
console.log(curried(1)(2)(3)):; /6 | 
console .log(curried(1. 2, 3)): /6 | 
consolelog(curried(1. 2)(3)): /6 | 
console log(curried(1)(2, 3)): /6 | 
console log(curried(1. 2. 3. 4)): /10 | 


8.2.5 ”curry 变 体 


在 8.2.4 节 ， 详 细 讲解 了 函数 式 编程 中 规范 curry0 函 数 的 设计 模式 。 实 际 上 ，curry0 函 数 的 设计 
不 是 固定 的 ， 可 以 根据 具体 应 用 场景 灵活 定制 。 

curry 有 3 个 作用 : 缓存 参数 、 和 暂缓 函数 执行 、 分 解 执行 任务 。 

curry 能 够 将 包含 N 个 参数 的 函数 转化 为 可 返回 一 个 N 个 函数 的 嵌 套 系列 ， 每 个 函数 都 采用 1 个 
参数 ， 模 式 化 代码 如 下 所 示 。 


Tetum fonction(c) {returmn fh(a.b.c)} 


血 = function(a.b.c) 全 / 原 函数 | 
/ 将 函数 的 参数 从 左 向 右 进行 柯 里 化 | 
curry(fh)=function(a) { // 柯 里 化 函数 | 
Tetum function(b) { | 

| 


= 
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| } 
| // 将 函数 的 参数 从 右 向 左 进行 柯 里 化 
sp rightCury(fh)=function(c) { / 从 右 到 左 柯 里 化 函数 
仿 fF Tetum function(b) { 


| Tetum function(a) {return fn(a.b.c)} 
本 


| 【示例 1】JavaScript 实现 代码 如 下 。 


/ 返回 一 个 函数 ， 该 函数 在 调用 时 将 参数 的 顺序 颠倒 过 来 
function flip(fh) { 
Tetum function() { 
var args = [].slice.call(arguments); 
Teturn fh.apply(this, args.reverseO): 


}; 
} 
// 返回 一 个 新 函数 ， 从 右 到 左 柯 里 化 原始 函数 的 参数 


function rightCurry(fn, n) { 
var arity =n || fh.length, // 如 果 没 有 限定 次 数 ， 则 采用 原 函数 的 形 参 个 数 
血 = flip(fh); // 颠倒 原 函 数 形 参 顺 序 


ITetum function curriedO { 
| var args 二 .slice.call(areuments)， / 把 参数 转换 为 数组 
| context = this: 1/ 存储 当前 上 下 文 
| Tetum args.length >= arity ? // 到 达 限 定 次 数 ， 则 执行 原 函数 ， 传 入 限定 的 参数 
fh.apply(context, args.slice(0, arity)): 
functionO { // 如 果 没 有 到 达 限 定 次 数 ， 则 继续 curry 
| var rest = [].slice.call(areuments): 
| // 递归 调用 返回 cury0 函 数 
| Tetum curried.apply(context, args.concat(rest)):; 


上 
} 


| 应 用 代码 如 下 。 
| 


// 无 限 求 和 运算 
var f= fonction0 { 
/ 把 参数 转换 为 数组 ， 再 使 用 reduce0 方 法 迭代 求 和 
Tetum [].slice.call(arguments).reduce(function(sum, item) { 
// 对 数值 进行 求 和 ， 非 数字 转换 为 0 
Tetum (+sum ? sum : 0) + (+item ? item : 0): 
入 
} 
”f=rightCury(f, 10):// 柯 里 化 函数 ， 限 定 10 个 传 参 
| console log( 人 1. 2)(3. 4. 5)(6. 7. 8)(9. 10)):// 55 
| 
| 


| cury 也 称 部 分 求 值 。 一 个 cury0 函 数 首先 会 接受 一 些 参数 ， 接 受 了 这 些 参 数 之 后 ， 该 函数 并 不 
| 会 立即 求 值 ， 而 是 继续 返回 另外 一 个 函数 ， 前 面 传 入 的 参数 在 函数 形成 的 闭 包 中 被 保存 起 来 。 待 到 函 
| 数 被 真正 需要 求 值 时 ， 之 前 传 入 的 所 有 参数 才 被 一 次 性 用 于 求 值 。 
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【示例 2】 下 面 示例 采用 多 步 式 操作 进行 求 和 运算 。 要 实现 多 步 式 求 和 运算 ， 就 不 能 够 采用 上 面 | 
示例 设计 的 curry0 函 数 。 | 
/ 定制 cury0 函 数 ， 接 受 一 个 函数 ， 返 回 将 要 被 curry0 的 函数 


var curry = function(fh) { | 全 | 
var args = []:; // 临时 仓库 | 
Tetum function0 { // 返回 curmry0 函 数 
if (arguments.length — 0) { // 如 果 没 有 参数 ， 则 执行 求 和 运算 Note 
retum fn.apply(this, args): | 
上 
else { // 如 果 传 入 参数 ， 则 把 参数 存储 到 临时 数组 中 | 
Dipush. apply(args, arguments): | 
Tetum arguments.callee: / 返回 cury0 函 数 ， 继 续 接收 数据 | 
} 
} 
上 
// 将 被 curry 的 函数 


| 
varcost= (fimction0 { 。。”// 自 调用 函数 ， 形 成 闭 包 体 ， 以 方便 分 步 式 操作 


Var money = 0; 


在 8.2.4 节 介绍 的 curry0 函 数 ， 是 根据 函数 的 形 参 个 数 作为 条 件 ， 决 定 是 否 执 行 函数 。 这 种 设计 | 
方法 比较 通用 , 但 是 当 我 们 做 无 限 次 连续 运算 时 ,就 遇 到 障碍 。 而 本 节 的 curry0 函 数 设 计 : 根据 函数 | 
是 否 传递 参数 作为 执行 函数 的 条 件 ， 这 样 就 可 以 实现 curry0 函 数 的 连续 不 限 次 操作 。 

【示例 3】 分 步 式 操作 不 符合 函数 式 编程 要 求 ， 它 是 命令 式 编码 风格 ， 下 面 重 写 示 例 1 代码 ， 实 

在 示例 1 基础 上 ， 保 持 curry0 函 数 不 变 。 重 写 求 和 运算 函数 cost0， 代 码 如 下 。 

1/ 将 被 curry 的 函数 

Var cost = functionO { 

Var money = 0: 

for (vari= 0.1= arguments.length: i1<1:i++) { 
money += arguments[i]: 

lL 

Tetum money: 


retum function| { | 

// 求 和 运算 | 
for(vari=0.1=arguments.length:i<1l i++) { | 
money += arguments[i]: | 

} | 

} | 
D0; | 
Var cost = curry(cost); / 转化 成 curry0 函 数 | 
// 分 步 式 操作 | 
cost(100): / 未 真正 求 值 | 
cost(200): 1/ 未 真正 求 值 | 
cost(300): / 未 真正 求 值 | 
console.log (costO): // 求 值 并 输出 : 600 | 
| 

| 
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| 柯 里 化 cost 函数 。 
cost =cury(cost); 7 转化 成 cuay0 函 数 
f | 调用 curry0 函 数 。 
屋内 consoleJog(eost(100)200)(00)0): /求人 并 输出 :600 
上 面 一 行 代码 完成 了 命令 式 编程 中 4 行 代码 ， 使 代码 看 起 来 更 优雅 、 有效， 这 正 是 函数 式 编程 的 


风格 。 
8.3 函 十 


函数 不 仅 可 以 用 于 同一 个 范畴 之 中 值 的 转换 , 还 可 以 用 于 将 一 个 范畴 转换 成 另 一 个 范畴 这 就 涉及 
| 函 子 (Functor)。 

| 容 提示 : 本 节 涉 及 构造 函数 和 实例 对 象 基础 知识 ， 如 果 初 次 学 习 本 节 比 较 困难 ， 建 议 学 习 完 第 
| 9、10 章 后 再 回来 阅读 。 


8.3.1 认识 函 子 


| 
| 函 子 是 函数 式 编程 里 最 重要 的 数据 类 型 ， 也 是 基本 的 运算 单元 和 功能 单位 。 
| 它 首先 是 一 种 范畴 ， 即 是 一 个 容器 ， 包 含 了 值 和 变形 关系 (处 理 函数 )。 比 较 特 殊 的 是 ， 它 的 变 
| 形 关系 可 以 依次 作用 于 每 一 个 值 ， 将 当前 容器 变形 成 另 一 个 容器 。 
任何 具有 map0 方 法 的 数据 结构 ， 都 可 以 当 作 函 子 的 实现 。 例 如 : 
class Functor { 

constructor(val) { 

this.val = val: 


b 
map(D { 
Tetum new Functor(fthis.val)): 
} 
} 


| 上 面 代码 中 , Functor 是 一 个 函 子 , 它 的 map0 方 法 接受 函数 f 作 为 参数 , 然后 返回 一 个 新 的 函 子 ， 

| 里面 包含 的 值 是 被 了 处 理 过 的 fthis.val)。 

| 一 般 约定 ， 函 子 的 标志 就 是 容器 具有 map0 方 法 ， 该 方法 将 容器 里 面 的 每 一 个 值 ， 映 射 到 另 一 个 
容器 。 例 如 : 

| (new Functor(2)).map(function(two) { 

| Tetum two + 2: 

| Ds // Functor(4) 

| new Functor('abc')).map(function(s) { 


| GewFunctor(abc))map(_.concat(def))map(_prop(length7): 
| // Functor(6) 
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上 面 示例 说 明 ， 函 数 式 编程 里 面 的 运算 ， 都 是 通过 函 子 完成 的 ， 即 运算 不 直接 针对 值 ， 而 是 针对 | 

这 个 值 的 容器 : 函 子 。 函 子 本 身 具有 对 外 接口 (map( 方 法 )， 各 种 函数 就 是 运算 符 ， 通 过 接口 接 入 容 | 
器 ， 引 发 容器 里 面 的 值 的 变形 。 | 
因此 , 学习 函数 式 编程 ,实际 上 就 是 学 习 函 子 的 各 种 运算 。 由 于 可 以 把 运算 方法 封装 在 函 子 里 面 ， | 
所 以 又 衍生 出 各 种 不 同类 型 的 函 子 ， 有 多 少 种 运算 ， 就 有 多 少 种 函 子 。 函 数 式 编程 就 变 成 了 运用 不 同 | 
的 函 子 ， 解 决 实际 问题 。 


8.3.2 定义 容器 | 
使 用 过 jQuery 的 读者 ， 应 该 熟悉 $0 构造 函数 ， 它 返回 的 对 象 并 不 是 一 个 原生 的 DOM 对 象 ， 而 
是 对 于 原生 对 象 的 一 种 封装 。 例 如 : | 


Var foo =$C#foo): 

foo 一 document.getElementById('foo’): // false 

foo[0] 一 document.getElementById(Cfoo): /tme 

这 在 某 种 意义 上 就 是 一 个 “容器 ”， 但 它 并 不 是 函数 式 。 

容器 为 函数 式 编程 中 变量 、 对 象 、 函 数 提供 了 一 层 极 其 强大 的 外 衣 ， 赋 予 了 它们 一 些 很 惊艳 的 


特性 。 
【示例 】 下 面 是 一 个 简单 的 容器 。 


Var Container = function(x) { 
this.value = x: 


’ 
Container.of = function(x) { 
Tetum new Container(X): 
} 
console.log(Container.of(1).value); /1 
console.log(Container.of('‘abcd").value): /abcd' 


调用 ContainerofO 方 法 把 东西 装 进 容器 中 后 ， 由 于 这 一 层 外 壳 的 阻挡 ， 普 通 的 函数 就 对 他 们 不 再 | 
起 作用 ， 所 以 需要 加 一 个 接口 来 让 外 部 的 函数 也 能 作用 到 容器 里 面 的 值 。 | 
| 


Container.prototype.map = function(f) { 
Tetum Container.of(f(this.value)) 

} 

现在 可 以 这 样 使 用 它 。 


Container.of(3) 


): /Container(Resultis 4) 
上 面 代码 经 过 简单 的 封装 ， 就 可 以 实现 链 式 调用 ， 这 也 是 函 子 的 基本 结构 类 型 。 
Functor 〈 函 子 ) 是 实现 了 map， 并 遵守 一 些 特定 规则 的 容器 类 型 。 
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容 提示 : 在 上 面 示例 中 ， 当 生成 新 的 容器 时 ， 没 有 直接 使 用 new 运算 符 ， 因 为 new 命令 是 面向 对 
象 编 程 的 语法 标志 。 所 以 ， 函 数 式 编程 一 般 约 定 ， 函 子 需 要 定义 一 个 of 方法 ， 用 来 生成 
新 的 容器 ， 这 样 也 能 够 保证 链 式 语法 的 正确 使 用 。 


EN | 
8.3.3 定义 函 子 


| 本 质 上 分 析 , Functor 是 一 个 对 于 函数 调用 的 抽象 , 我 们 赋予 容器 自己 去 调用 函数 的 能 力 。 当 map 
| 一 个 函数 时 ， 让 容器 自己 来 运行 这 个 函数 ， 这 样 容 器 就 可 以 自由 地 选择 何 时 何 地 如 何 操作 这 个 函数 ， 
以 至 于 拥有 惰性 求 值 、 错 误 处 理 、 异 步调 用 等 非常 实用 的 特性 。 
【示例 1】 新 建 一 个 Functor， 命 名 为 Functor。 
var Functor = function(x) { 
this.value = x; 


} 

// Functor 构造 函数 

Functor.of = function(x) { 
Tetum new Functor(x): 


b 
/ 映射 函数 ， 为 当前 值 调用 处 理 函 数 ， 并 返回 处 理 结果 : 新 的 函 子 
Functor.prototype.map = function(f) { 

Tetum this.isNothingO ? Functor.oftnull) : Functor.of(f(this.value)): 


了 
/ 检测 值 是 否 为 空 ， 当 值 为 null 或 undefined， 返 回 tme 
Functor.prototype.isNothing = functionO { 

retum (this.value 一 一 Dull || this.value —— undefined); 
// 求 和 运算 
var add = function(x) { 

Tetum function(y) { 

Tetum x + y; 
} 


| 中 
| /连续 求 和 
| console.log(Functor.of(4) 
-map(add(6)) 
‘map(add(11)) 
-map(add(11)) 
.map(add(10)).value): // Functor(42) 
上 面 代码 通过 链 式 调用 ， 可 以 允许 输入 一 堆 .map0 〇 0， 实现 连续 求 和 。 
窟 提示: 函 子 接受 各 种 函数 ， 处 理 容器 内 部 的 值 。 这 里 就 有 一 个 问题 ， 容 器 内 部 的 值 可 能 是 一 个 
空 值 ( 如 null)，, 而 外 部 函数 未 必 有 处 理 空 值 的 机 制 ， 如 果 传 入 空 值 , 很 可 能 就 会 出 错 。 
例如 : 


| FunctoroftnulD).map(fonction(s) { 
| Tetum s.toUpperCaseO: 
| 国有 /TypeEmor 
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上 面 代码 中 ， 函 子 里 面 的 值 是 null， 结 果 就 出 错 。 
为 了 解决 这 一 类 问题 ， 可 以 在 map() 方 法 中 设置 空 值 检 查 。 


Functorprototype.map = function(f) { | 
Tetum this.isNothing() ? Functor.of(null) : Functor.of(f\this.value)): | 国清 
} Waa 


这 样 当 函 子 处 理 空 值 时 就 不 会 出 错 。 | Note 


这 种 包含 空 值 检测 的 函 子 也 被 称 为 Maybe 函 子 。 
【示例 2】 在 示例 1 基础 上 ， 继 续 优 化 其 中 的 求 和 运算 函数 。 


/ 求 和 运算 | 
var add = function| { | 
// 把 参数 转换 为 数组 | 
Var xX = Array.prototype.slice.call(arguments): 
retum finctionO) { 

/ 把 参数 转换 为 数组 | 
var y = Arrayprototype slice.calltarguments): | 
Varz=X.concat(y):// 合并 数组 | 

Tetum z.reduce(function(a, b) { / 返回 数组 元 素 值 之 和 
/ 快速 转换 为 数值 ， 存 在 则 加 ， 和 否则 设置 为 默认 值 0 

Ietum (ta 0) + (+b |‖ 0); 


D; 
} 


上 
这 样 可 以 实现 多 参数 求 和 运算 。 
/ 连续 求 和 
console.log(Functor.of(4) 
‘map(add(6)) 
map(add(6., 12)) 
.map(add(11. 7. 9)) 
.map(add(10)).value); // Functor(65) 
【示例 3】 如 果 觉 得 链 式 调用 总 要 输入 一 堆 .map0， 比 较 麻 烦 。 那 么 可 以 配合 compose 和 curry 
运算 ， 优 化 上 面 示例 的 设计 。 
(1) 设计 函 子 Functor， 代 码 与 示例 1 相同 。 
// 定义 函 子 Functor 
Var Functor = function(x) {} 
// Functor 构造 函数 
Functor.of = function(x) {} 
/ 映射 函数 ， 为 当前 值 调用 处 理 函 数 ， 并 返回 处 理 结果 : 新 的 函 子 
Functorprototype map = function(f) {} 
// 检测 值 是 否 为 空 ， 当 值 为 null 或 undefined， 返 回 tme 
Functor.prototype.isNothing = fonction0 {} 
(2) 设计 求 和 运算 ， 代 码 同上 。 
(3) 使 用 curry 柯 里 化 求 和 函数 。 
Var add = curry(add): 
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| (4) 定义 一 个 柯 里 化 的 map。 
var map = curry(function(E fimeton) { 
| Tetum functor.map(D):; 
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| (5) 实例 化 函 子 。 
Var functor = Functor.of(4): 
| (6) 定义 事务 。 使 用 compose 组 合 多 个 求 和 运算 ， 然 后 传递 给 map。 
Var doEverything = map(compose(add(10). add(6). add(6. 7). add(6))): 
(7) 执行 事务 。 把 函 子 实例 传递 给 事务 函数 doEverything。 
consolelog(doEverythingtfunctoDj: 7 Functor(39) 


8.3.4 Either 函 子 


| 

| 条 件 运 算是 最 常见 的 运算 之 一 ， 在 函数 式 编程 中 ， 使 用 Either 函 子 表达 。 

| Either 函 子 内 部 有 两 个 值 ， 左 值 (left) 和 右 值 (right)。 右 值 是 正常 情况 下 使 用 的 值 ， 左 值 是 右 
| 值 不 存在 时 使 用 的 默认 值 ， 其 结构 如 下 。 


| class Either extends Functor { 

| 

| constructor(left, right) { 

| this.left = left; 
this.right = right: 


| map(D { 
| Teturm this.right ? 
| Either.oftthis .left, ftthis.right)) : 
Either.oftftthis .left), this.right): 
} 
} 
Either.of = function(left, right) { 
Tetum new Either(left, right): 
> 
【示例 】 下 面 示例 简单 演示 了 Either 函 子 的 使 用 。 


// 定义 函 子 Functor 

Var Functor = fnnction(x. y) { 
this.x = Xx: 
this.y=y: 


} 
// Functor 构造 函数 


| 
| Functor.of = function(x. y) { 
| Tetum new Functor(x, y): 


} 
| / 映射 函数 ， 为 当前 值 调 用 处 理 函 数 ， 并 返回 处 理 结果 : 新 的 函 子 
| Functor.prototype.map = function(f) { 
| retum thisy? 
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Functor.oftthis.x, f(this.y)) : | 
Functor.oftthis.x. this.y): | 
} | 
/ 递增 运算 | / 
var addOne = function(x) { | 
Tetum x+ 1; | A 


: iote 
console.log(FunctorofS, 6).map(addOne)): /Functor(S. 7): 


console.log(Functor.of(1. nulD).map(addOne)): /Functor(l. nulD): 


在 上 面 示例 中 ， 如 果 右 值 有 值 ， 就 使 用 右 值 ， 和 否则 使 用 左 值 。 通 过 这 种 方式 ，Either 函 子 表达 了 
条 件 运算 。 

Either 函 子 的 常见 用 途 是 设置 默认 值 ， 另 一 个 用 途 是 代 蔡 try/catch， 使 用 左 值 表示 错误 。 

JavaScript 错误 处 理 的 语句 结构 如 下 。 

try{ 

dosomething0: | 

) 

// 错误 处 理 


} | 

实际 上 ，try-catch-throw 并 不 是 “ 纯 ” 的 ， 因 为 它 从 外 部 接管 了 函数 ， 并 且 在 函数 出 错时 抛弃 了 
函数 返回 值 ， 这 不 是 期 望 的 函数 式 行为 。 | 

对 于 函数 式 编程 ， 可 以 这 样 操作 : 如 果 运 行 正确 ， 那 么 就 返回 正确 的 结果 ; 如 果 错误 ， 就 返回 一 
个 用 于 描述 错误 的 结果 。 这 个 概念 在 Haskell 中 称 之 为 Either 类 ，Left 和 Right 是 它 的 两 个 子 类 。 用 
JavaScript 实现 的 代码 如 下 。 


// 与 Functor 结构 一 样 
var Left = function(x) { 


this.value = x: | 
1 | 
Var Right = function(x) { | 
this.value = X: | 


} 

// 与 Functor 结构 一 样 

Left.of = function(x) { 
Tetum new Left(x): 


由 
Right.of = function(x) { 
Tetum new Right(x); 


| 
// 下 面 与 Functor 不 同 
Left.prototype.map = function(f) { 


Tetum this 


} 
Right.prototype.map = function(D) { 
Tetum Right.of(f(this.value)): 
} 
console.dir(Right.of("Hello").map(function(str) { 
Tetum str + " World!" 
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7) // Right("Hello World!") 
| console.dir(Left.of("Hello").map(function(str) { 
| Tetum str + " World!" 
| 7 // Left(“Hello") 
生 下 Hea 和 Right 哗 一 区 别 就 在 于 smap 方法 的 实现 ，Rightmap 的 行为 与 Maybe-map 函数 一 样 。 但 是 
Left.map 就 不 同 : 它 不 会 对 容器 做 任何 事情 , 只 是 很 简单 地 返回 这 个 容器 实例 。 这 个 特性 意味 着 , Left 
| 可 以 用 来 传递 一 个 错误 消息 。 
| “7 错误 处 理 
| Var getAge = fonction(useD { 
Tetum user.age ? Right.oftuser.age) : Left.of("ERROR!"): 
| 人 
”WW 应 用 
| console.dir(getAge({ name: 'stark’, age: '21' }).map(function(age) { 
Tetum 'Age is '+ age: 
D); //=> Right(Ageis 21) 
| console.dir(getAge({ name: 'stark’ }).map(function(age) { 
| Tetum 'Age is '+ age; 
| 77; /=> LefCERRORI) 
从 上 面 代码 可 以 看 到 ，Left 可 以 让 调用 链 中 任意 一 环 的 错误 立刻 返回 到 调用 链 的 尾部 ， 这 给 错 
误 处 理 带 来 了 很 大 的 方便 ， 再 也 不 用 一 层 又 一 层 的 try-catch。 
Left 和 Right 是 Either 类 的 两 个 子 类 ， 事 实 上 Either 并 不 只 是 用 来 做 错误 处 理 的 ， 它 表示 了 逻辑 
或 ， 范 畴 学 中 的 coproduct。 


8.3.5 Applicative 函 子 


上 面 几 节 定义 的 函 子 ， 都 是 函 子 包 含 值 ， 通 过 map 调用 外 部 函数 处 理 容器 内 的 值 ， 现 在 我 们 换 
-种 思维 ， 让 函 子 包含 处 理 函 数 ， 通 过 map 传 入 值 ， 实 现 对 数据 的 处 理 。 这 种 形式 的 函 子 就 是 
| Applicative 函 子 。 简 单 说 ， 凡 是 部 署 applicative 方法 的 函 子 ， 就 是 Applicative 函 子 。 

【示例 1】 下 面 通过 一 个 示例 演示 Applicative 函 子 的 定义 方法 和 演示 效果 。 
(1) 定义 一 个 通用 函 子 。 
/ 定义 函 子 
var Functor = function(x) { 
this.value = x: 
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| 国生 

| / 构造 函数 

| Functor.of = function(x) { 
Tetum new Functor(X): 


由 
| // 映射 函数 
| Functor.prototype.map = function(f) { 
| Tetum this.isNothing() ? Functor.oftnull) : Functor.of(fthis.value)): 
| 


} 

/ 检测 空 值 

Functor.prototype.isNothing = fonction0 { 

| Tetum (this.value 一 二 Dull | this.value —— undefined): 
| 
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(2) 定义 一 个 Applicative 函 子 ， 实 现 applicative 方法 。 


/ 定义 Applicative 函 子 
Var App = function(x) { 
this.value = x: 


外 分 


} 

// 构造 函数 

App.of = function(x) { 
Tetum new App(%): 


} 

// applicative 方法 | 

App.prototype.ap = function(functor) { | 
Tetum App.oftthis.value(finctor.value)): | 

} 


< 注意 : applicative 方法 的 参数 不 是 函数 ， 而 是 另 一 个 函 子 。 

(3) 设计 一 个 运算 函数 。 
// 递增 运算 
Var addOne = function(x) { 

retum x+ 1; 

上 

(4) 把 运算 函数 传 入 App 容器 ， 然 后 使 用 ap 调用 Functor 函 子 。 
consolelog(App.offaddOne).ap(Functorof2)); /App(G3) 


容 提示: Applicative 函 子 存在 的 意义 : 对 于 那些 多 参数 的 函数 ， 可 以 从 多 个 容器 之 中 取 值 ， 实 现 函 
子 的 链 式 操作 。 
【示例 2】 下 面 示例 演示 了 从 多 个 函 子 中 取 值 ， 然 后 通过 Applicative 函 子 执行 运算 。 
(1) 复制 8.3.4 节 示 例 代 码 。 
(2) 重新 设计 运算 函数 。 
// 求 和 运算 


var add = function(a, b, ¢) { 
Tetum (+al| 0) + (+b 1|0) + (+e lO): 


E 
(3) 柯 里 化 求 和 函数 。 
add = curry(add): 

(4) 把 柯 里 化 的 运算 函数 传 入 App 容器 ， 然 后 使 用 ap 调用 多 个 Functor 函 子 的 值 。 


console.log(App.ofadd) 

.ap(Functorof2)) 

.ap(Functor.of(3)) 

.ap(Functor. of(4))): /App(9) 


在 上 面 代码 中 ， 函 数 add 是 柯 里 化 以 后 的 形式 ， 一 共 需 要 3 个 参数 。 通 过 App 函 子 ， 就 可 以 实 
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| 现 从 3 个 容器 中 取 值 。 它 还 有 另外 一 种 写法 。 
通过 App 函 子 ， 也 可 以 实现 从 另外 两 个 容器 中 取 值 ， 代 码 如 下 。 
console.log(App.of(add(2)) 


.ap(Functor.of(3)) 
-ap(Functor.of(4))): /App(9) 


| 8.4 高 阶 邯 数 


高 阶 函数 是 指 至 少 满足 下 列 条 件 之 一 的 函数 。 

加 函数 可 以 作为 参数 被 传递。 

回 ”函数 可 以 作为 返回 值 输出 。 

| 在 实际 开发 中 ， 无论 是 将 函数 作为 参数 传递 ,还 是 让 函数 的 执行 结果 返回 另外 一 个 函数 ， 这 两 种 
| 情形 都 有 很 多 应 用 场景 ， 以 下 就 是 一 些 高 阶 函 数 的 应 用 。 


8.4.1 回调 函数 


把 一 个 函数 作为 另外 一 个 函数 的 参数 ， 当 调用 这 个 函数 时 ， 这 个 函数 就 称 为 回调 函数 。 
在 函数 式 编程 中 ， 回 调 函数 可 以 作为 容器 对 外 开放 接口 ， 以 增强 函数 的 功能 和 灵活 性 。 
1. 应 用 场景 1: 异步 请 求 
在 Ajax 异步 请 求 中 , 经 常会 用 到 函数 式 参数 ,作为 回调 函数 ， 对 异步 响应 数据 进行 处 理 。 例 如 : 
// callback 为 待 传 入 的 回调 函数 
Var getUserInfo = function(userId, callback) { 
$.ajax("http:// xxx.com/getUserInfo?" + UserId, function(data) { 
if (typeof callback — "function") { 
callback(data); 
} 


| »); 
| } 
| getUserInfo(13157, function(data) { 
alert (data.userName): 
| D: 
| 
| 2. 应 用 场景 2: 排序 函数 
| 数组 的 很 多 方法 都 要 传 入 函数 ， 如 sort、map、forEach、some、reduce 和 reduceRight 等 。 
| 例如 ，Arrayprototype.sort 接受 一 个 函数 当 作 参 数 ， 这 个 函数 里 面 封 装 了 数组 元 素 的 排序 规则 。 
| 从 Amrayprototype-sort 的 使 用 可 以 看 到 ， 其 目的 是 对 数组 进行 排序 ， 这 是 不 变 的 部 分 ， 而 使 用 什么 规 
| 则 去 排序 ， 则 是 可 变 的 部 分 。 把 可 变 的 部 分 封装 在 函数 参数 内 ， 动 态 传 入 Array.prototype.sort， 使 
| Arrayprototype.sort 方法 成 为 一 个 非常 灵活 的 方法 。 
/从 小 到 大 排列 
| [1, 4, 3].sort(function(a.b) { 


| Tetum a—b: 
} 
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外 分 


yy / 输出 : [1, 3.4] 

/1 从 大 到 小 排列 

[1, 4. 3].sort(fanction(a. b) { 
retum b—a; 

六: / 输出 : [4. 3, 1] 


8.4.2 返回 函数 
在 很 多 应 用 场景 中 都 需要 返回 函数 来 实现 连续 运算 。 
1. 应 用 场景 1: 数据 类 型 检测 | 
例如 ， 下 面 是 一 段 简单 的 数据 类 型 检测 。 | 


var Type = ©}; 
for (var i= 0, type; type = ['String’, 'Array’, Number][it+]:) { 
(fimction(type) { | 
Type[is + type] = function(obj) { | 
Tetum Objectprototype.toString.call(obj) = 一 '[object+ type +]'; | 


} 
Dltype) 
lj 
console.log(Type.isArray([])): ltrue 
console.log(Type.isString("str")): /l/true 


2. 应 用 场景 2: 单 例 模式 
单 例 就 是 保证 一 个 类 只 有 一 个 实例 , 实现 的 方法 一 般 是 先 判 断 实例 存在 与 否 , 如 果 存 在 直接 返回 ， 
如 果 不 存 在 就 创建 了 再 返回 ， 这 就 确保 了 一 个 类 只 有 一 个 实例 对 象 。 在 JavaScript 中 ， 单 例 作为 一 个 
命名 空间 提供 者 ， 从 全 局 命名 空间 里 提供 一 个 唯一 的 访问 点 来 访问 该 对 象 。 
Var getSingle = function(fh) { 
Var ret: 
Tetum function| { 
Teturn ret | (ret = fh.apply(this, arguments)): 


下 


窟 提示 : 也 可 以 限定 函数 仅 能 调用 一 次 ， 避 免 重复 调用 ， 这 在 事件 处 理 函 数 中 非常 有 用 。 


<p> 仅 能 点 击 一 次 </p> 

‘<script> 

var f= fonction0 { 
console.log(this.nodeName) 
Tetum this.nodeName: 


) 

document.getElementsByTagName("p")[0].onclick = getSingle(D: 

</script> 

3. 应 用 场景 3: 实现 AOP 

AOP (面向 切面 编程 ) 的 主要 作用 是 把 一 些 跟 核 心 业务 逻辑 模块 无 关 的 功能 抽 离 出 来 ,这 些 跟 业 
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务 罗 辑 无 关 的 功能 通常 包括 日 志 统计 、 安 全 控制 、 异 常 处 理 等 。 把 这 些 功能 抽 离 出 来 后 ， 再 通过 “ 动 
态 织 入 ”的 方式 迭 入 业务 逻辑 模块 中 。 这 样 做 的 好 处 : 首先 可 以 保证 业务 逻辑 模块 的 纯净 和 高 内 至 
性 ， 其 次 可 以 方便 地 复 用 日 志 统计 等 功能 模块 。 
食 内 | 在 JavaScript 中 实现 AOP， 一 般 是 把 一 个 函数 “动态 织 入 ”到 另外 一 个 函数 中 ， 具 体 的 实现 技术 
~ 、 有 很 多 。 下 面 的 例子 通过 扩展 Function prototype 来 做 到 这 一 点 。 

Function .prototype before = function(beforefh) { 

| var _self= this: / 保存 原 函 数 的 引用 

| retum fimction() { // 返回 包含 原 函数 和 新 函数 的 “代理 ”函数 

| beforefn.apply(this, arguments); / 执行 新 函数 ， 修 正 this 

Tetum selfapply(this. arguments): // 执行 原 函 数 
| 
| ri after = function(afterfn) { 
var self=this; 
Tetum fonctionO { 

| varret= self.apply(this, arguments): 
| afterfh.apply(this, arguments): 
| Tetum ret: 
} 


5 

Var func = fonctionO { 
console.log(2); 

于 

func = func.before(function() { 
console.log(1): 

| }).after(functionO) { 

| 本 console.log(3): 

| > 

| funcO: // 按 顺序 输出 1，2，3 


4. 应 用 场景 4: 柯 里 化 
在 8.2 节 中 ， 详 细 讲 解 了 柯 里 化 的 实现 和 应 用 ， 这 里 就 不 再 闭 述 。 
5. 应 用 场景 5: uncurry 
| 在 JavaScript 中 ， 用 户 不 用 关心 一 个 对 象 原本 是 否 被 设计 为 拥有 某 个 方法 ， 这 是 动态 类 型 语言 的 

| 特点， 也 是 常 说 的 鸭子 类 型 思想 。 同 理 ， 一 个 对 象 也 未 必 只 能 使 用 它 自身 的 方法 ， 使 用 call 或 apply 
可 以 把 任意 对 象 当 作 this 传 入 某 个 方法 ， 这 样 该 方法 中 this 就 不 再 局 限于 原 对 象 ， 而 是 被 泛 化 ， 从 而 
| | 得 到 更 广泛 的 适用 性 。 

uncurry 的 目的 : 将 泛 化 this 的 过 程 提取 出 来 ， 将 血 .call 或 者 甸 .apply 抽象 成 通用 的 函数 。 
| /uncurry 实现 
| Function.prototype.uncurry = fonction0 { 
| Var self = this: 
| Tetum function0O { 
Tetum Function.prototype.call.apply(self. arguments): 
} 

| 中 
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下 面 将 Array.prototype.push 原型 方法 进行 uneurry 泛 化 ,此 时 push 函数 的 作用 与 Array.prototype. 
push 一 样 ， 但 不 仅 局 限于 操作 Array 对 象 ， 还 可 以 操作 Object 对 象 。 


/ 泛 化 Amrayprototypepush 

var push = Array.prototype.push.uncurryO: 

var obj = ©}; 

/ 可 以 把 数组 转换 为 类 数组 

push(obj, [3, 4. 3]): 

console.log(obj); 。 // 输出 类 数组 。{0: 3, 1: 4. 2: 5., length: 3} 


6. 应 用 场景 6: 函数 节 流 | 
在 7.4.12 节 中 ， 详 细 讲 解 了 柯 里 化 的 函数 节 流 的 实现 和 应 用 ， 这 里 就 不 再 袭 述 。 | 
| 
7. 应 用 场景 7: 分 时 函数 
当 批量 操作 影响 到 页 面 性 能 时 ， 如 一 次 往 页 面 中 添加 大 量 DOM 节点 ,显然 会 给 浏览 器 泻 染 带 来 | 
影响 ， 极 端 情况 下 可 能 会 出 现 卡 顿 或 假死 等 现象 。 
解决 方法 : 把 批量 工作 分 批 操作 ， 如 把 1 秒 钟 创建 1000 个 节点 ， 改 为 每 隔 200 毫秒 创建 8 个 节 
实现 代码 如 下 。 
vartimeChunk = fonction(ary, fh, count) { 
Var 
Var start = function() { 
for (var i=0: i < Math.min(count | 1. ary.length): i++) { 
Var obj = ary.shift(): 
fh(obj); 
} 


上 
Tetum function0O { 
t= setInterval(function| { 
让 (ary.length 一 = 0) { // 如 果 全 部 节点 都 已 经 被 创建 好 
Tetum clearInterval(t): 


} 


),200 / 分 批 执行 的 时 间 间 隔 ， 也 可 以 用 参数 的 形式 传 入 
We 
timeChunk 函数 接受 3 个 参数 ， 第 1 个 参数 表示 批量 操作 时 需要 用 到 的 数据 ， 第 2 个 参数 封装 了 
批量 操作 的 逻辑 函数 ， 第 3 个 参数 表示 分 批 操作 的 数量 。 
8. 应 用 场景 8: 情 性 载 入 函数 
在 7.4.11 节 中 ， 详 细 讲解 了 局 性 载 入 函数 的 实现 和 应 用 ， 这 里 就 不 再 袭 述 。 


8.5 遂 归 函数 


递归 函数 就 是 在 函数 内 部 调用 自身 ， 以 实现 循环 运算 ， 或 者 设计 和 迭代 操作 。 
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8.5.1 定义 递归 函数 


递归 函数 包含 两 个 必要 条 件 。 
| 递归 调用 。 
| 递归 终止 条 件 。 
递归 终止 条 件 一 般 使 用 过 条 件 进行 控制 , 只 有 在 某 个 条 件 成 立时 才 允 许 执行 递归 调用 , 否则 停止 


不 是 所 有 从 代 操作 都 需要 递归 ， 在 以 下 3 种 情况 下 ， 可 以 考虑 递归 求解 。 
| 1 数学 运算 
| 数学 领域 中 的 选 代 运 算 ， 如 阶乘 函数 、 寡 函数 和 斐 波 那 契 数列 。 
| 【示例 1】 下 面 代码 使 用 递归 求解 阶乘 函数 。 
var f= function(x) { 


if(x<2) 
| retum 1: / 递归 终止 条 件 
| else 
| Teturn x * arguments.callee(x — 1); / 递归 调用 过 程 
} 
console.log (人 20)); // 返回 20 的 阶乘 值 为 2432902008176640000 


在 这 个 过 程 中 , 利用 分 支 结构 把 递归 结束 条 件 和 需要 继续 递归 求解 的 情况 区 分 开 来 。 对 于 比较 复 
| 杂 的 问题 ， 如 果 能 够 分 解 为 多 个 相对 简单 ， 且 解法 相同 或 类 似 的 子 问 题 ， 那 么 当 这 些 子 问题 获得 解决 
| 时 ， 原 问题 自然 也 就 获得 解决 ， 这 是 一 个 递归 求解 的 过 程 。 

| 2. 树 形 数据 结构 

| 树 形 数据 结构 适合 使 用 递归 函数 实现 遍历 操作 ， 如 目录 结构 、JSON 数据 等 。 

| 【示例 2】DOM 文档 树 就 是 一 种 递归 的 数据 结构 ， 下 面 使 用 递归 运算 来 计算 指定 节点 内 所 包含 


| 的 全 部 节点 数 。 
oa 
| ‘<script> 
| function fn) { / 统计 指定 节点 及 其 所 有 子 节点 的 个 数 
varl=0; / 初始 化 计数 变量 
if(nnodeType = 1) // 如 果 是 元 素 节点 ， 则 计数 
TH // 递 加 计数 器 
| var child = n.childNodes: / 获取 子 节点 集合 
| for (vari=0:i< childlength: i++) { // 遍历 所 有 子 节点 
| 1+= ftchild[i]): / 递归 运算 ， 统 计 当 前 节点 下 所 有 子 节点 数 
} 
Tetum 1: / 返回 节点 数 
} 
window.onload = functionO { / 绑 定 页 面 初始 化 事件 处 理 函数 


| 
| 
| Var body = document.getElementsByTagName("body")[0]: 
| / 获取 当前 文档 中 body 节点 句柄 
alert(f(body)) / 返回 2， 即 body 和 script 两 个 节点 
站 
| </script> 
body> 
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3. 算法 求解 


有 些 算法 比较 复杂 ， 如 果 采 用 其 他 方法 ， 可 能 比较 低 效 ， 而 采用 递归 算法 能 够 化 繁 为 简 ， 最 典型 
的 例子 就 是 Hanoi ( 汉 诺 ) 塔 。 


/ 汉 诺 塔 算法 函数 

/ 参数 : n 表示 金 片 数 ，a、b、c 表示 柱子 ， 注 意 排列 顺序 

/ 返回 值 : 当 指 定金 片 数 ， 以 及 柱子 名 称 ， 该 函数 将 输出 整个 移动 的 过 程 

function fn. a, b. ©) { 
if(n—=1) // 特殊 处 理 

document.write(a + "&rarr:" + ¢ + "<br />"); 

/ 输出 显示 ， 直 接 让 参数 a 移 给 c | 
else { | 

| 


ln -ac b): / 递归 调用 函数 ， 调 整 参 数 顺序 ， 让 参数 a 移 给 b 
document.write(a + " &rarr:; "+c+"<br />"); 
/ 输出 显示 


fn - 1.b.a.c): 


| 

/ 如 果 当 n 等 于 1 时 ， 调 整 参 数 顺序 ， 让 参数 b 移 给 | 
} | 
BC // 调用 函数 


8.5.2 尾 递 归 


尾 递归 是 递归 算法 的 一 种 优化 算法 ， 它 是 从 最 后 开始 计算 ， 每 递归 一 次 就 算出 相应 的 结果 。 也 就 
是 说 ， 函 数 调用 出 现在 调用 函数 的 尾部 ， 因 为 是 尾部 ， 所 以 就 不 用 去 保存 任何 局 部 变量 ， 返 回 时 调用 
函数 可 以 直接 越过 调用 者 ， 返 回 到 调用 者 的 调用 者 。 

【示例 1】 下 面 是 阶乘 的 一 种 普通 线性 递归 运算 。 

function f(n) { 

retum (n—=1)?1:n*fln- 1): 


b 
console.log (f(5)): 
使 用 尾 递归 算法 后 ， 则 可 以 使 用 如 下 方法 。 


function fn) { 
retum (n=—= 1)?1 :en, 1); 


人 
function e(n. a) { 
Tetum(n — 1)?a:eln- 1,a*n); 


» 
alert(f(5)): 


当 n=5 时 ， 线 性 递归 的 递归 过 程 如 下 所 示 。 


{5)= {5 * f(4)} 
A 
={5*{4* {3*f2)}}} 
2D 
SE 1}} 
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S43 2} 
| ={5*{4*6)}} 
| = {5*24} 
| =120 


和 而 尾 递归 的 递归 过 程 如 下 所 示 。 


| =f4, 5) 
| = 人 3, 20) 
| =f2.60) 
| ={(1, 120) 
| =120 
可 以 看 到 ,普通 的 线性 递归 比 尾 递归 更 加 消耗 资源 , 每 次 重复 的 过 程 调用 都 使 得 调用 链条 不 断 加 
| 长， 系统 不 得 不 使 用 栈 进行 数据 保存 和 恢复 ,而 尾 递 归 就 不 存在 这 样 的 问题 ， 因 为 它 的 状态 完全 由 变 
| 量 n 和 a 保存 。 
| 【示例 2】 上 面 的 阶乘 尾 递归 可 以 改 为 下 面 的 迭代 循环 。 
| varn=5 
| Var W=1; 
for(vari= 1;i<=5;it) { 
W=W*i 
| 加 本 
alertw): 
| 


| 容 提示 : 两 种 递归 进行 简单 比较 。 

| 回 ”线性 递归 : fn)， 返 回 值 会 被 调用 者 使 用 。 

回 尾 递归 : fmn)， 返 回 值 不 会 被 调用 者 使 用 。 

尾 递 归 由 于 直接 返回 值 , 不 需要 保存 临时 变量 , 所 以 性 能 不 会 产生 线性 增加 . 并 且 JavaScript 
解释 器 会 将 尾 递归 形式 优化 成 非 递归 形式 。 


| 8.5.3 栈 缓存 


函数 可 以 利用 对 象 暂 存 先前 操作 的 结果 ， 从 而 能 避免 重复 运算 。 这 种 方法 可 以 优化 递归 函数 。 

| 【示例 】 使 用 递归 函数 计算 fibonacci 数列 。 一 个 fibonacci 数字 是 之 前 两 个 fbonacci 数字 之 和 。 
| 最 前 面 的 两 个 数字 是 0 和 1 。 

| Var fibonacci = function(n) { 

| retum n <2?n :fibonacci(n ~ 1)+ fibonacci(n -2): 

} 

for(vari=0;i<=10:i+=1){ 

document writeln(<br>' +i+": "+fibonacci(D)): 


返回 下 面值 。 


.242 . 


第 8 章 台数 式 编程 一 


We 


在 上 面 代码 中 fibonacci 函数 被 调用 了 453 次 ， 其 中 循环 调用 了 11 次 ， 它 自身 调用 了 442 次 ， 去 
计算 可 能 已 被 刚 计算 过 的 值 。 如 果 使 该 函数 具备 记忆 功能 ， 就 可 以 显著 减少 它 的 运算 次 数 。 
先 使 用 一 个 临时 数组 保存 存储 结果 ， 存 储 结 果 可 以 隐藏 在 闭 包 中 。 当 函数 被 调用 时 ， 先 看 是 否 已 
经 知道 存储 结果 ， 如 果 已 经 知道 ， 就 立即 返回 这 个 存储 结果 。 
Var fibonacci = (fonction0 { 
var memo = [0. 1]; 
var fib = function(n) { 
Var result = memo[n]; 
这 typeof result !=—— number’) { 
result = fib(n = 1) + fib(n = 2); 
memo[n] = result: 


} 

Teturn result; | 

下 | 

Tetum fib; | 
}0); 


for(vari=0;i<=10:i+=1){ 
document.writeln('‘<br>' +i+": '+ fibonacci(i)); 

有 

这 个 函数 返回 同样 的 结果 ， 但 是 它 只 被 调用 了 29 次 ， 其 中 循环 调用 了 11 次 ， 它 自身 调用 了 18 | 
次 ， 去 取得 之 前 存储 的 结果 。 当 然 可 以 把 这 种 函数 形式 抽象 化 ， 以 构造 带 记忆 功能 的 函数 。memoizer | 
函数 将 取得 一 个 初始 的 memo 数组 和 fundamental 函数 。memoizer 函数 返回 一 个 管理 memo 存储 和 在 
需要 时 调用 fundamental 函数 的 shell 函数 。memoizer 函数 传递 这 个 shell 函数 和 该 函数 的 参数 给 
fundamental 函数 。 


Var memoizer = function(memo,formula) { 
Var recur = function(n) { 
var result = memo[n]: 
这 typeof result ! 一 "umber) { 
result = formula(recur. n): 
memol[n] = result: 
} 
Tetum result: 
和 


Tetum recur: 


入 | 
现在 ， 就 可 以 使 用 memoizer 来 定义 fundamental 函数 ， 提 供 初 始 的 memo 数组 和 fundamental | 
函数 。 | 
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Var fibonacci = memoizer([0. 1]. function(recur. n) { 
| Tetum recur(n ~ 1) + recur(n 一 2): 
| D; 
会 内 通过 设计 能 产生 其 他 函数 的 函数 ， 可 以 极 大 减少 必要 的 工作 。 例如， 要 产生 一 个 可 记忆 的 阶乘 函 
~ 一 数 ， 只 须 提供 基本 的 阶乘 公式 即 可 。 


var factorial = memoizer([1, 1], function(recur. 1) { 


| Tetummn*TIecurn — 1):; 


| 8.6 案例 实战 


本 节 将 结合 一 个 典型 示例 介绍 函数 式 编程 中 各 种 运算 思维 和 实现 方法 。 示 例 将 要 处 理 从 异步 请 求 
中 获取 的 数据 。 数 据 采用 JSON 格式 ， 包 含 了 博客 文章 的 摘要 列表 ， 数 据 结构 如 下 。 


/ 异步 获取 JSON 数据 的 一 条 示例 数据 
var records = [ 
{"id": 1, "title": "函数 式 编程 ", "author": "Lisp"url": "/1", 
"tags": [" 函 数 式 "," 运 算式 "],"published": "2017-11-15"}， 
{"id": 2, "title"; "面向 对 象 编程 ", "author": "Java","url": "/2", 
": [" 面 向 对 象 "," 类 型 "],"published": "2018-01-10"}, 
{"id": 3, "title": "过 程式 编程 ", "author": "C","url": "/3", 
"tags": [" 结 构 化 "," 命 令 式 "],"published": "2018-01-15"}. 
RE 


二 
设计 需求 : 想 要 显示 最 近 的 文章 〈 不 超过 一 个 月 )， 按 标签 分 组 ， 按 发 布 日 期 排序 。 
任务 分 解 如 下 。 

过 滤 掉 一 个 月 以 前 的 文章 (如 30 天 ) 。 

通过 tags 对 文章 进行 分 组 ， 如 果 有 多 个 标签 ， 则 会 显示 在 两 个 分 组 中 。 

按 发 布 日 期 排序 每 个 标签 列表 ， 降 序 。 


8.6.1 过 滤 运 算 

过 滤 运 算 的 符号 化 表示 为 : [00212 1] =>[2.,2]。 

| JavaScript 提供 了 一 个 原生 的 方法 : Arrayprototype.filter， 该 方法 解决 问题 的 思维 方式 如 下 。 
| 

| list.filter(fh) 


| 其 中 list 表示 数组 容器 ， 血 表示 过 滤 函 数 。 这 是 命令 式 思维 ， 两 个 参量 数据 和 过 滤器 ， 只 能 并 
| 发 运行 ， 不 能 线性 运行 。 这 样 就 无 法 实现 表达 式 描述 ， 无 法 延迟 运算 过 程 。 
| 使 用 函数 式 思维 应 该 如 下 所 示 。 
adisg 
使 用 fiter(f 先 包装 过 滤器 ， 然 后 可 以 根据 不 同 ist 执行 不 同 的 过 滤 操 作 ， 实 现 过 滤 引 擎 和 过 滤 
| 数据 的 品行 化 编码 。 其 优点 是 : 线性 思维 明晰 ,过滤 函 数 和 过 滤 数 据 可 以 分 开 处 理 , 不 影响 整个 程序 ， 
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所 方 

代码 优雅 ， 执 行 效率 高 。 
根据 函数 式 编程 思维 ， 完 成 本 节 示例 的 过 滤 任务 : 过 滤 掉 发 布 日 期 超过 30 天 的 文章 记录 。 
【示例 1】 由 于 函数 式 编程 都 是 先 定义 各 种 可 重用 的 小 函数 ， 所 以 先 要 构建 用 来 封装 过 滤 行 为 的 | 
任务 函数 。 | 
(1) 包装 原生 的 filter0 方 法 ， 设 计 过 滤器 。 


var filter = function(list, fn) { 


var list = list ? list : [], / 初始 化 数据 集合 
// 初始 化 过 滤 函 数 
fn= typeof fh ——= "function" ? fh : function| {retum tme: }: 
Tetum list.filter(fh): / 执行 过 滤 操 作 


| 
| 

} | 
| 

(2) 反 向 柯 里 化 过 滤 函 数 。rightCurryO 函 数 代码 的 详细 讲解 请 参考 8.2.5 节 内 容 。 | 
var filter = rightCurry(filter); | 
| 

(3) 设计 被 过 滤 的 数据 和 过 滤 函 数 。 | 
| 


var list = [1, 2, 3. 4. 5, 6, 7, 8, 9, 10]; 
var fn = finction(n) {retum n % 2— 0;}: // 过 滤 出 偶数 列表 
(4) 创建 应 用 过 滤器 。 | 
filter = filter(fh): 
(5) 获取 列表 中 的 偶数 。 | 
console.log(filter(lisD)): 1/ [2.4.6.8.10] | 
上 面 操作 步骤 主要 是 为 了 方便 读者 理解 ， 实 际 应 用 中 可 能 一 行 完成 任务 。 | 
rightCurry(filter)(fimnction(n) {retum n % 2— 0:})[1, 2, 3, 4. 5. 6. 7, 8 9, 10]) | 


【示例 2】 在 上 面 示例 基础 上 ， 我 们 进一步 复杂 化 。 
(1) 重新 设计 过 滤 函 数 。 


var fn = function(a, b) { // 简单 过 滤 函 数 ， 使 用 >= 比较 
Tetum a > 一 b: 


} | 
(2) 由 于 过 滤 函 数 包 售 两 个 参数 ， 无 法 确保 能 够 同时 传 入 ， 所 以 柯 里 化 过 滤 函 数 ， 把 过 渡 函 数 | 
分 解 为 两 步 操作 。 | 

var fn = rightCurry(fh): 

(3) 设置 过 滤 的 闭 值 ， 定 义 应 用 过 滤 函 数 ， 这 是 分 解 过 滤 函 数 后 的 第 一 步 操作 。 

豆 三 三 5 判 电 一 个 值 是 否 大 于 等 于 5 

(4) 把 过 滤 函数 传 入 过 滤器 ， 生 成 应 用 过 滤器 ， 再 传 和 被 过 滤 的 数据 ， 完 成 最 后 一 步 操作 。 其 | 
中 在 ilter 迁 代数 组 元 素 时 ， 会 被 每 个 元 素 值 传 给 柯 里 化 函数 和 0， 赋 值 给 参量 a， 逐 个 对 数组 元 素 进 | 
行 过 滤 。 

console.log(filter(fn)(list)): / [5.6.7.8.9.10] 
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| 【示例 3】 上 面 两 个 示例 主要 讲解 了 过 滤 运算 的 基本 思路 ， 下 面 示例 将 回 到 本 节 任务 上 来 ， 我 们 
| 要 过 滤 下 面 数据 中 最 近 30 天 的 文章 记录 。 


varrecords=[ 
全 站 | frid": 1, "title": "函数 式 编程 " "author": "Lisp","url": "/1", 
| "tags": [" 函 数 式 "" 运 算式 "]."published": "2017-11-15"}. 
{"id" 2, "title": "面向 对 象 编程 ", "author": "Java""url": "/2", 
| "tags": [" 面 向 对 象 "." 类 型 "]."published": "2018-01-10"}, 


| {"id": 3, "title": "过 程式 编程 ", "author": "C""url": "/3", 
". [" 结 构 化 "," 命 令 式 "],"published": "2018-01-15"}, 


上 
根据 示例 2 的 设计 思路 ， 在 设置 过 滤 阀 值 时 ， 只 需要 传 入 published 字段 值 即 可 ， 但 是 需要 解决 
两 个 问题 。 

第 一 ，filter 迭代 记录 集 时 ， 返 回 的 是 每 条 记录 对 象 ， 需 要 进行 转换 。 
| 第 二 ，published 字段 值 是 日 期 字符 串 ， 需 要 转换 为 毫秒 数 。 
| 按 过 程式 编程 思维 ， 只 需要 按 如 下 思路 从 零 开始 重新 设计 代码 如 下 。 这 样 就 不 需要 定义 所 有 的 小 
| 函数 ， 也 不 需要 去 理解 curry、compose 等 运算 方式 。 
| var ar =records.filter(function(obj) { 

var val = obj.published: 

| val = new Date(val).getTime0; 
| Var day = (new DateO).getTimeO - (86400000 * 30): 
| 


Tetum val > day; 
D) 
| 代码 看 起 来 更 直观 、 简 洁 ， 但 是 它 却 不 是 我 们 所 要 的 ， 不 符合 函数 式 编程 思维 ， 代 码 的 可 扩展 性 
| 和 可 重用 性 都 无 从 谈 起 。 


| 按 函 数 式 编程 思路 设计 过 程 。 
| (1) 继续 在 示例 2 基础 上 进行 优化 ， 着 重 解决 上 面 描述 的 两 个 问题 。 首 先 ， 定 义 一 个 小 函数 
| getO0， 用 来 读 取 指定 对 象 的 属性 值 。 


| 

| / 把 日 期 字符 串 转换 为 毫秒 值 

| vartoTime = function(str) { 
Var str = str ? str : (new DateO).getTimeO: 
Tetum (new Date(str)).getTime(): 


} 
// 访问 对 象 的 属性 
var get = fimction(obj, prop) fretum toTime(obj[prop]):} 
(2) get0 函 数 包含 两 个 参数 值 ， 但 是 在 表达 式 运算 中 无 法 同时 传 入 ， 所 以 需要 柯 里 化 。 
| get= TightCumy(geb: // 柯 里 化 get0 函 数 
| (3) 先 传 入 1 个 参数 ， 即 指定 要 读 取 的 属性 名 称 。 第 2 个 参数 留待 未 来 动态 传 入 。 
published 
(4) 由 于 get0 和 fn0 两 个 函数 是 线性 串 连 关系 ，get0 接 受 一 个 对 象 ， 然 后 返回 属性 值 ， 而 fn0 
的 参数 是 get0 的 返回 值 , fa0 的 返回 值 是 filter 执行 过 滤 的 判断 条 件 , 所 以 可 以 使 用 函数 合成 把 这 两 个 
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函数 串 连 在 一 起 ， 代 码 如 下 。 关 于 compose 函数 及 函数 合成 运算 请 参考 8.2.2 节 内 容 。 
fh = compose(fh, get); 
(5) 下 面 就 可 以 来 获取 过 去 30 天 内 发 布 日 期 的 任何 记录 信息 。 
console.log(filter(fn)(records)): 


// [0: Object fid: 2, tide: "面向 对 象 编程 ", author "Java", .….} 
/11: Object {id: 3, title: "过 程式 编程 ", author: "C", .…}] 


8.6.2 分 组 运算 


在 JavaScript 中 ， 可 以 使 用 Array.prototype.reduce 原生 方法 对 列表 中 的 元 素 进 行 分 组 ，reduce 通 
过 对 数组 中 每 个 元 素 进行 迭代 操作 来 构建 一 个 新 的 值 。 
reduce 符号 化 表示 为 : [002121] => [3]。 
reduce 思维 方式 为 : listreduce(fn, initVal) => val。 
正 是 这 种 迭代 数组 元 素 的 能 力 ， 并 构建 一 个 新 的 值 ， 可 以 使 用 reduce0 来 执行 分 组 操作 。 
分 组 的 思维 方式 如 下 。 
[002121 {[000000] 
O20 = [LTPLV 
100122] [222222] 
【示例 1】 下 面 代码 使 用 reduceO 秋 代 数组 list。 使 用 一 个 空 对 象 作为 起 点 ， 并 根据 年 龄 对 记录 进 
行 分 组 。 这 样 就 可 以 像 map 一 样 处 理 一 个 对 象 ， 将 记录 分 配给 结果 对 象 上 由 属性 名 称 标识 的 分 组 。 
varlist=[ 
{name: 'Dave' age: 40}、 
{name: 'Dan', age: 35}, 
{name: ‘Kurt' age: 44}, 
{name: ‘Josh', age: 33} 


上 
console.log(listreduce(function(acc, item) { 
Var key = item.age < 40 ? under40' :'over40' 
acc[key] = acc[key] | [J: 
acc[key].push(item): 
Teturn acc: 
}.0): 
输出 结果 如 下 。 
fover40': [ 
{name: 'Dave'. age: 40}、 
{name: ‘Kurt', age: 44} 


J 
mnder40': [ 
{name: 'Dan'. age: 35}. 
{name: ‘Josh'. age: 33} 


了 
【示例 2】 在 示例 1 基础 上 ， 下 面 将 以 函数 式 编程 思维 来 进行 设计 。 
(1) 设计 分 组 函数 ， 封 装 reduce 原型 方法 ， 实 现 把 数据 和 汇总 函数 同时 作为 参数 操作 。 
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// 函数 类 型 检测 工具 
Var isFunction = function(0) {return Object.prototype.toString.call(0) 一 '[object Function]':}: 
// 分 组 引擎 
# function group(list, prop) { 
鲜 | Tetum list.reduce(function(grouped. item) { 。 V 选 代 数组 ，grouped 汇总 变量 
| / 初始 值 为 {}.item 表示 每 个 元 素 〈 记 录 ) 
/ 如 果 prop 为 函数 ， 则 把 item 传递 给 函数 ， 然 后 直接 调用 返回 
| // 否则 获取 item 对 象 的 prop 属性 值 并 返回 
| var key = isFunction(prop) ? prop.apply(this. [item]): item[prop]; 
| grouped[key] = grouped[key] 1 []; / 初始 化 数组 


| grouped[key].push(item): // 把 当前 记录 推 入 数组 

| Teturn grouped: // 返回 分 组 对 象 

| }.0); 

| ! 

| (2) 在 表达 式 中 无 法 实现 同时 传 入 参数 ， 其 中 一 个 参数 需要 后 期 动态 传 入 ， 所 以 把 group0 函 数 
| 柯 里 化 。 

| 


(3) 定义 一 个 分 组 回调 函数 ， 然 后 把 它 传 给 group0 函 数 。 


/ 分 组 回调 函数 : 把 记录 分 为 2 组 ，age 小 于 40 为 一 组 ， 名 称 为 under40' 

| / 大 于 等 于 40 的 为 一 组 ， 名 称 为 'over40' 
| Var getKey = function(item) {retum item.age < 40 ? ‘under40': 'over40':}; 
| group = group(getKey):// 定义 可 应 用 的 分 组 函数 ， 即 指定 分 组 的 标准 和 行为 

(4) 开始 分 组 数据 ， 最 后 返回 的 分 组 信息 如 示例 1 的 返回 值 。 
console.log(group(list)); 

【示例 3】 在 示例 2 基础 上 ， 也 可 以 传 入 一 个 字符 串 ， 指 定 分 组 的 属性 名 。 
var list =[ 

{value: 'A', tag: ‘letter’}, 

| {value: 1, tag: ‘number’}. 
| {value: 'B' tag: ‘etter’}. 
| {value: 2.tag: number}、 


上 
group = group(tag ): / 定义 可 应 用 的 分 组 字段 
consolelog(groupdisD): 。“”// 开始 分 组 数据 


| 
| 最 后 返回 一 个 分 组 后 的 对 象 集合 ， 如 下 所 示 。 


fnetter: [ 
{value: 'A', tag: 'letter’}. 
| {value: 'B', tag: letter} 
| 国 
| mumber': [ 
| {value: 1. tag: number’}. 
{value: 2. tag: number} 
了 
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8.6.3 映射 运算 


JavaScript 使 用 Array.prototype.map 原生 方法 对 列表 中 的 元 素 进行 映射 ， 通 过 对 数组 中 每 个 元 素 | 
进行 迭代 操作 来 构建 一 个 新 的 数组 。 | 
map 符号 化 表示 为 : [002121] => [335454]。 
map 思维 方式 为 : list.map(fn) => newList。 
【示例 1】 上 述 是 一 种 过 程式 思维 模式 ， 为 了 方便 对 比 理解 ， 先 按 这 种 思维 模式 来 设计 一 个 数据 
分 组 练习 。 
(1) 重新 设计 一 下 异步 请 求 的 数据 ， 让 每 条 记录 包含 更 多 的 标签 关键 字 ， 以 便 练习 交叉 分 组 。 
这 里 在 "tags" 字 段 中 添加 了 重复 的 "编程 "标签 。 
var records = [{ 
"id": 1, "title": "函数 式 编程 ", "author": "Lisp" "url": "/1", | 
"tags": [" 函 数 式 ", "运算 式 ", "编程 "], "published": "2017-11-15" | 
} | 
| 


"id" 2, "title": "面向 对 象 编程 ", "author": "Java", "url": "/2", | 
"tags": [" 面 向 对 象 ", "类 型 ", "编程 "], "published": "2018-01-10" | 
La | 
"id": 3, "title": "过 程式 编程 " "author": "C", "url": "/3", | 
"tags": [" 结 构 化 ", "命令 式 ", "编程 "], "published": "2018-01-15" | 
} | 
下 | 


(2) 设想 把 上 面 数据 以 标签 进行 分 组 ， 分 组 后 的 数据 格式 如 下 : 把 数组 转换 为 对 象 ， 对 象 的 每 | 
个 键 名 为 标签 名 ， 键 值 为 包含 该 标签 的 一 组 记录 。 
二 
"函数 式 ": Array [ {.…} ] 
"命令 式 ": Array [ {..…} ] 
"类 型 ": Array [ {.…} ] 
"结构 化 ": Array [ {.…} ] 
"编程 Aray[ {…}.{.…}.{.…}] 
"运算 式 ": Array [ {.…} ] 
"面向 对 象 ": Array [ {..….}] 


(3) 编写 分 组 函数 。 在 该 函数 中 以 命令 式 方式 分 5 步 来 设计 ， 交 叉 匹 配 出 每 个 标签 对 应 的 所 有 | 
记录 。 | 
var group = finction(list) {7 分 组 函数 | 
var tags = list.map(function(item) {// 第 一 步 ， 通 过 映射 获取 所 有 标签 数据 
ee 


D:; 
/ 第 二 步 ， 把 堪 套 的 多 维 数组 扁平 化 为 一 维 数组 


tags 二 tags.filter(function(tag) {// 第 三 步 ， 过 滤 掉 数组 中 重复 的 标签 
Tetum !obj[tag] ? (obj[tag] = true) : false: 
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D; 
/ 第 四 步 ， 交 叉 匹 配 ， 返 回 一 个 数组 ， 数 组 第 一 个 元 素 为 标签 名 
/ 第 二 个 元 素 以 数组 格式 包含 了 所 有 包含 该 标签 的 记录 
tags= tags.map(finction(tag) { 
Var arr = list.filter(function(record) { 
Tetum record["tags"].indexOf(tag) > -1; 


多 
/ 第 五 步 ， 把 数组 转换 为 对 象形 式 ， 键 值 为 标签 名 ， 键 名 为 包含 记录 的 数组 
1etum tags reduce(function(obj, tag) { 
obj[tag[0]] = tag[1]:; 
Tetum obj: 
}.0) 


在 上 面 代码 中 ， 第 一 步 代 码 完 成 标签 的 抽取 ， 返 回 的 是 一 个 嵌 套 数组 ， 如 下 所 示 。 


[| 
0: Array [ "函数 式 ". "运算 式 ". "编程 " ] 
1: Array [ "面向 对 象 "." 类 型 " "编程 " ] 
2: Array [ "结构 化 ", "命令 式 ", "编程 " ] 
通过 第 二 步 扁平 化 和 第 三 步 去 重 ， 返 回 的 数组 如 下 。 
Array [ "函数 式 "， "运算 式 "， "编程 "， "面向 对 象 ", "类 型 "， "结构 化 "， "命令 式 " ] 
第 四 步 根据 这 个 处 理 后 的 数组 ， 交 叉 匹 配 原 记录 集 ， 返 回 一 个 分 组 数组 ， 格 式 如 下 。 
[| 
0: Array [ "函数 式 ",[..….] ] 
1: Array [ "运算 式 ", [.…] ] 
2: Array [ "编程 " [.…] ] 
3: Array [ "面向 对 象 ", [.…] ] 
4: Array [ "类 型 ", [.….] ] 
5: Array [ "结构 化 ",[.…] ] 
6: Array [ "命令 式 ". [.…]] 
第 五 步 把 分 组 数组 转换 为 更 易于 阅读 的 键 值 对 格式 的 对 象 。 
(4) 调用 group0 执 行 交叉 分 组 操作 。 


console.log(group(records)): 


【示例 2】 示 例 是 以 过 程式 思维 进行 设计 ， 下 面 以 函数 式 思维 来 重 设 这 个 案例 。 
(1) 以 逆向 思维 先 来 梳理 一 下 设计 思路 。 
将 借助 8.6.2 节 示 例 的 group0 分 组 函数 来 进行 分 组 ， 但 是 不 能 够 直接 对 records 数据 集 进 行 分 组 ， 
因为 tags 字段 是 一 个 数组 ， 包 含 多 个 标签 ， 且 部 分 标签 可 能 重 释 。 
设计 一 个 pair0 函 数 来 交叉 匹配 标签 集 和 记录 和 集 之 间 的 关系 ， 形 成 一 个 新 的 数据 集 ， 这 个 数据 集 
以 直接 能 够 传 入 group0 函 数 ， 新 数据 集 格式 类 似 于 示例 1 中 代码 第 四 步 所 生成 的 记录 集 。 
在 pair0) 中 要 完成 嵌 套 数组 扁平 化 处 理 、 重 复 项 目 去 重 等 操作 。 因 此 ， 可 以 把 这 些 任务 都 定义 为 
一 个 个 小 函数 ， 然 后 通过 嵌 套 调用 来 完成 任务 。 
设计 每 个 任务 小 函数 包含 两 个 参数 ， 一 个 是 被 处 理 的 数据 ， 另 一 个 是 要 处 理 的 函数 。 考 虑 到 这 两 


| 
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个 参数 无 法 同时 传 入 其 中 被 处 理 数据 依赖 其 他 任务 函数 的 处 理 结果 ， 所 以 可 以 把 他 们 部 柯 里 化 ,以 | 
延迟 函数 的 执行 ， 同 时 能 够 传 入 其 他 函数 作为 回调 函数 执行 。 
(2) 设计 映射 函数 。 根 据 分 步 传 入 的 数据 和 处 理 函数 ， 映 射 一 个 新 数组 。 


function map(list, fh) { / 映射 器 其 


Tetum list map(fh);: | 
} ete 
varmapWith = rightCurry(map): // 柯 里 化 映射 器 | 


映射 器 只 提供 操作 通道 ， 实 际 上 是 包装 了 原生 的 map() 方 法 。 
(3) 设计 扁平 化 处 理 函数 ， 把 传 入 的 嵌 套 数组 转换 为 一 维 数组 返 | 
fnnction flatten(list) { | 
Ietum list.reduce(function(items, item) { 1/ 迭代 每 个 元 素 | 
/ 使 用 concat 把 每 个 嵌 套数 组 转换 为 一 层 数组 | 

/ 然后 合并 到 items 临时 数组 中 ， 最 后 返回 items 

Tetum isArray(item) ? items.concat(item) : item: | 
}.D; | 
| 


互 


(4) 设计 扁平 化 映射 函数 ， 把 映射 器 和 扁平 化 处 理 函 数 捆绑 在 一 起 。 
/ 扁平 化 交配 数组 ， 交 配 数组 初始 为 多 层 嵌 套数 组 ， 需 要 转换 为 一 层 数组 
function flatMap(list, fh) { 

return flatten(map(list, fn)); 


} 

// 柯 里 化 扁平 化 交配 数组 

var flatMap = rightCurry(flat Map): 

flatMap 符号 化 表示 为 : [[00][21][21]] => [002121]。 

flatMap 思维 方式 为 : flatMap(fn)(list)。 

(5) 设计 交配 器 。 根 据 get0 函 数 获取 指定 字段 和 记录 匹配 的 标签 数组 ， 该 方法 可 以 参考 8.6.1 

节 详 细 说 明 ， 最 后 传 入 原始 记录 集 ， 即 异步 响应 的 文章 记录 集 。 

function pair(list, listFn) { /1/ 交配 器 

isArray(list) || (list = [list)/ 如 果 list 不 是 数组 ， 则 转换 为 数组 


// 如 果 listFn 不 是 函数 ， 也 不 是 数组 ， 则 转换 为 数组 
(isFunction(listFn) | isArray(listFn)) | (listFn = [listFn]): 


Tetum flatMap(finction(itemLeft) { / 传 入 交配 处 理 函 数 
Tetum mapWith(function(itemRight) { 
// 交配 生成 数组 ， 每 个 tag 匹配 包含 自身 的 项 目 ， 形 成 新 的 数组 
Tetum [itemLeft, itemRight]: 


/ 如 果 listFn 是 函数 ， 则 调用 并 传 入 映射 过 程 中 每 个 元 素 项 目 
/ 返回 当前 项 目的 tags 数组 ， 如 果 是 数组 ， 则 直接 传 入 
DlisFunction(listFn) ? listFn.call(this, itemLeft) : listFn): 
))disb: / 传 入 数据 
} 
var pair = rightCurry(pair): 1/ 柯 里 化 交配 器 


pair 符号 化 表示 为 : [01] [21] > [[02][01][12][11]]。 
pair 思维 方式 为 : pair (listA)(listB)。 


251» 


_ [sse 网 页 编程 从 入 门 到 精通 ( 币 梨 精 编 版 ) 


| (6) 使 用 交配 器 获取 新 的 数据 集合 ， 它 是 一 个 二 维 数组 ， 每 个 项 目 包含 两 个 元 素 ， 第 一 个 子 元 
素 是 records 记录 集中 的 一 条 记录 ， 第 二 个 元 素 是 一 个 标签 。 


| 
| 
| var tags = pair(get('tags'))(records): 


入 7) 把 新 获取 的 tags 数据 集合 传 给 group0 分 组 函数 (可 参考 8.6.2 节 详细 讲解 )， 同 时 传 入 处 理 
Note | 函数 get(D)， 它 表示 根据 记录 集 的 每 条 记录 ， 获 取 第 二 个 元 素 ， 即 根据 标签 名 进行 分 组 。 最 后 输出 结 
Note 果 如 下 
| 果 如 下 。 


| BE 
| "函数 式 ": Array [[.…]] 
"命令 式 ": Array [[.…]] 

| "类 型 ": Amray [[.…]] 

| "结构 化 ": Array [[.….]] 

| "编程 :Armray [ [了 [小 二:]] 
"运算 式 ": Array [[..]] 
"面向 对 象 ": Array [ [.…] ] 


8.7 使 用 Promise 对 象 


Promise 是 JavaScript 异步 操作 解决 方案 。 Promise 封装 了 函数 式 编程 范式 , 是 函 子 的 一 个 经 典 应 
用 ， 本 节 内 容 包 括 : 
(1) JavaScript 的 异步 执行 。 
(2) 异步 操作 的 流程 控 。 
(3) Promise 对 象 。 
(4) Promise 的 应 用 。 
本 节 内 容 放 在 线 上 供 读者 选 学 ， 感 兴趣 的 读者 请 扫 码 阅读 。 
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对 象 是 JavaScript 的 一 个 基本 类 型 ， 是 带 有 属性 和 方法 的 将 殊 数 据 ， 是 一 种 复合 值 ， 它 
将 很 多 值 ( 原始 值 或 者 其 他 对 象 ) 聚 合 在 一 起 ,可 通过 键 名 访问 这 些 值 , 即 属性 的 无 序 集合 。 
在 JavaScript 中 , 所 有 事物 都 是 对 象 , 如 字符 囊 、 数 值 、 布 尔 值 、 数 组 、 函 数 等 。 同时 JavaScript 
提供 多 个 内 置 对 象 ， 如 Object、Function、Aray、String、Number、Boolean、Date、Math、 
RegExp、Error 等 。 此 外 ，JavaScript 也 允许 自 定义 对 象 


【 学 习 重 点 】 
MH 创建 对 象 。 
操作 对 象 
使 用 对 象 属性 
使 用 内 置 对 象 


豆 于 于 
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9.1 创建 对 象 


。 JavaSeript 是 一 种 基于 原型 的 面向 对 象 语言 ， 与 Java 有 非常 大 的 区 别 ， 无 法 通过 类 来 创建 对 象 。 
JavaSeript 通过 下 面 3 种 方法 来 创建 对 象 。 


| 9.1.1 使 用 new 运算 符 


| 使 用 new 运算 符 调用 构造 函数 ， 可 以 创建 一 个 实例 对 象 ， 具 体 用 法 如 下 。 
| Var objectName = new functionName(args); 
| 简单 说 明 如 下 。 
objectName: 表示 构造 的 实例 对 象 。 
加 ”functionName: 表示 一 个 构造 函数 ， 构 造 函 数 与 普通 函数 没有 本 质 区 别 ， 一 般 情 况 下 构造 
函数 不 需要 返回 值 ， 构 造 函数 体内 可 以 使 用 this 指 代 objectName 实例 对 象 。 
回 args: 表示 参数 列表 。 
【示例 1】 下 面 使 用 构造 函数 创建 对 象 。 
| var 0 = new ObjectO: // 创建 一 个 空 对 象 
| Var 0 =new ArrayO; // 创建 一 个 空 的 数组 对 象 
| var 0 = new MyClassO: // 创建 一 个 自 定义 对 象 


| 使 用 Object 构造 函数 创建 的 对 象 是 一 个 不 包含 任何 属性 和 方法 的 空 对 象 ， 而 使 用 内 置 构造 函数 
创建 的 对 象 将 会 继承 该 构造 函数 的 属性 和 方法 。 
| 在 上 面 示例 中 第 2 行 代码 创建 了 一 个 空 数 组 对 象 , 但 是 这 个 新 创建 的 对 象 o。 具 有 数组 操作 的 基本 
| 方法 和 属性 ,如 length 属 性 可 以 获取 该 数组 的 元 素 个 数 ,而 push0 方 法 将 会 为 该 数组 对 象 添加 新 元 素 。 
| var 0 = new ArrayO; // 创建 一 个 空 对 象 
console.log(o.length); // 返回 值 0， 说 明 当前 数组 为 0 个 元 素 
| var1= opush(1.2.3): / 调用 push0 方 法 为 数组 添加 3 个 元 素 ， 并 返回 新 长 度 
| console.log(D): / 返回 值 3， 说 明 数 组 中 包含 3 个 新 元 素 
| 【拓展 】 
在 JavaScript 中 ，Object、Array、Function、RegExp、String 等 内 置 对 象 都 是 构造 函数 ， 使 用 new 
运算 符 可 以 调用 它们 ， 可 以 创建 一 个 个 对 象 实例 。 
在 JavaScript 中 ， 构 造 函数 具有 以 下 特性 。 
使 用 new 运算 符 进行 调用 ， 也 可 以 使 用 小 括号 调用 ， 但 返回 值 的 方式 不 同 。 
构造 函数 内 部 通过 this 关键 字 指 代 实 例 对 象 ， 或 者 指向 调用 对 象 。 
回 ”在 构造 函数 内 可 以 通过 点 运算 符 声明 本 地 成 员 。 当 然 ， 构 造 函 数 结构 体内 也 可 以 包含 私有 
变量 或 函数 ， 以 及 任意 执行 语句 。 
【示例 2】 下 面 代码 定义 一 个 构造 函数 Box0， 该 对 象 是 高 度 抽象 的 ， 通 过 this 关键 字 来 代称 ， 
当 使 用 new 运算 符 实例 化 构造 函数 时 ， 可 以 通过 传递 参数 来 初始 化 这 个 对 象 的 属性 值 。 
function Box(w.h){ / 构造 函数 
| this.w = Ww: / 构造 函数 的 成 员 
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thish=h: // 构造 函数 的 成 员 | 
} | 
var box1 =new Box(4.5): / 实例 并 初始 化 构造 函数 | 
由 于 每 一 个 构造 函数 都 定义 对 象 的 一 个 类 ,所 以 给 每 个 构造 函数 一 个 名 字 ， 以 说 明 它 所 创建 的 对 | a 
象 类 就 显得 比较 重要 了 ， 类 名 应 该 很 直观 ， 且 首 字母 要 大 写 〈 非 强制 的 )， 主 要 是 与 普通 函数 进行 | 安 一 
区 别 。 
【示例 3】 构造 函数 没有 返回 值 ， 这 是 它 与 普通 函数 的 一 个 最 大 区 别 。 它 们 只 是 初始 化 由 this 关 | 
键 字 传递 进来 的 对 象 ， 并 且 什么 也 不 返回 。 但 是 ， 构 造 函 数 可 以 返回 一 个 对 象 值 ， 如 果 这 样 做 ,被 返 | 
加 的 对 象 就 成 了 new 表达 式 的 值 。 在 这 种 情况 下 ，this 值 所 引用 的 对 象 就 被 丢弃 。 | 


| 

finction Box(wHJf // 构造 函数 | 

this.w = Ww: | 

thish =h: 

Tetum this; // 返回 关键 字 this | 
} | 
console.log(Box(4,5).w): / 返回 参数 值 4， 此 时 构造 函数 成 为 普通 的 函数 | 
不 过 可 以 实例 化 构造 函数 ， 并 调用 该 对 象 的 属性 。 | 
var boxl = new Box(4.5); / 实例 并 初始 化 构造 函数 
consolelog(boxl.w) // 调用 对 象 的 属性 


| 
当 使 用 new 运算 符 调用 构造 函数 时 ，JavaScript 会 自动 创建 一 个 空白 的 对 象 ， 然 后 把 这 个 空 对 象 | 
传递 给 this 关键 字 ， 作 为 它 的 引用 值 。 这 样 ，this 就 成 为 新 创建 对 象 的 引用 指针 。 | 
【示例 4】 使 用 构造 函数 定义 一 个 Book 类 型 ， 并 定义 两 个 参数 ， 以 便 实例 化 对 象 时 能 够 初始 化 | 
实例 对 象 。 
function Book(title.pages) { / 把 书稿 构造 为 函数 
this.title = title; 
this.pages = pages: 
this.what = functionO { 


console.log(this .title +this.pages): 

于 | 

} | 

Var bookl =new Book("JavaScript 程序 设计 ",160): / 实例 化 构造 函数 ， 并 初始 化 | 
var book2 =new Book("C 程序 设计 ".240): / 实例 化 构造 函数 ， 并 初始 化 


9.1.2 ”对 象 直接 量 
使 用 直接 量 可 以 快速 定义 对 象 。 具 体 用 法 如 下 。 


在 对 象 直接 量 中 ， 属 性 名 与 属性 值 之 间 通 过 冒号 进行 分 隔 ， 属 性 值 可 以 是 任意 类 型 的 数据 ， 属 性 | 
名 可 以 是 JavaScript 标识 符 ， 或 者 是 任意 形式 的 字符 串 。 属 性 与 属性 之 间 通 过 逗号 进行 分 隔 ， 最 后 一 | 
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| 个 属性 末尾 不 需要 去 号。 
”使 用 对 象 直接 量 是 创建 对 象 最 高 效 、 最 简便 的 方法 ， 推 荐 使 用 这 种 方式 定义 对 象 。 
| 【示例 1】 下 面 代 码 使 用 对 象 直接 量 定义 一 个 对 象 ， 其 包含 两 个 属性 a 和 b。 


/| | /1 对象 直接 量 
网 | Be / 定义 属性 


Ee Te 
| 上 


变量 名 是 标识 符 ， 而 属性 名 是 一 个 字符 串 标 签 ， 对 于 上 面 示例 中 定义 的 对 象 直接 量 ， 也 可 以 这 样 


| 来 表示 

| of // 对 象 直接 量 

| "an 1, // 定义 属性 

| "b": tme / 定义 属性 
} 


| 但 是 变量 名 就 不 能 够 使 用 字符 串 表 示 。 在 构造 函数 内 也 不 能 使 用 字符 串 标签 来 命名 属性 名 , 因为 
| 此 时 属性 名 是 合法 的 标识 符 。 


| Var 0 = function) { Uh 由 
this.a= 1: 1/ 定义 
this.b = trme; // 定义 属性 

| 


对 象 的 属性 值 可 以 是 任意 类 型 数据 ， 如 值 类 型 数据 、 数 组 、 对 象 、 函 数 等 。 
【示例 2】 如果 属性 值 是 函数 ， 则 该 属性 就 变 成 对 象 的 方法 。 


varo={ // 对 象 直接 量 
| a: fonction0 { // 属性 值 为 函数 
| Tetum 1: 
| } 
We 
| console log(o.a0); / 附加 小 括号 读 取 属性 值 ， 即 调用 方法 
| 【示例 4】 如 果 属 性 值 是 对 象 ， 则 可 以 设计 堪 套 结构 的 对 象 。 
| 
| varo={ // 对 象 直接 量 
| En / 属性 值 为 对 象 
| b:1 
| } 
| 1 
| consolelogtoab; // 连续 使 用 点 号 运算 符 读 取 内 层 对 象 的 属性 值 
【示例 5】 下 面 示例 定义 属性 值 是 数组 。 
| varo={ // 对 象 直接 量 
| a: [1,2,3] // 属性 值 为 数组 
| 国 轩 
| eonsolelogoafoj) / 使 用 下 标 来 读 取 属性 包 全 的 元 素 什 
| 【示例 6】 如 果 不 包 含 任何 属性 ， 则 可 以 定义 一 个 空 对 象 。 
| 
| Ee // 创建 一 个 空 对 象 直接 量 
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9.1.3 ”使 用 create() 方 法 
ECMAScript 5 为 Object 添加 了 一 个 静态 方法 Objectcreate0， 直 接 调 用 该 方法 可 以 快速 创建 一 个 新 | 
对 象 。Object.create0 能 够 创建 一 个 具有 指定 原型 且 可 选择 性 地 包含 指定 属性 的 对 象 ， 具 体 用 法 如 下 。， 
Object.create(prototype, descriptors) | 
参数 说 明 如 下 。 


加 ”prototype: 必需 参数 ， 要 用 作 原 型 的 对 象 ， 可 以 为 null。 
descriptors: 可 选 参数 ， 包 含 一 个 或 多 个 属性 描述 符 的 JavaScript 对 象 。 


痊 提示 :在 descriptors 中 , 数据 属性 是 可 获取 且 可 设置 值 的 属性 。 数据 属性 描述 符 包含 value 特性 ， 
以 及 writable ( 是 否 可 修改 属性 值 ) 、enumerable ( 是 否 可 枚 举 属 性 ) 和 configurable (是 | 
否 可 修改 特性 和 删除 属性 ) 特性 。 如 果 未 指定 最 后 3 个 特性 ， 则 它们 的 值 默认 为 false。 
只 要 检索 或 设置 该 值 ， 访 问 器 属性 就 会 调用 用 户 提供 的 函数 。 访 问 器 属性 描述 符 包含 set 
(设置 属性 值 的 函数 ) 特性 和 get (返回 属性 值 的 函数 ) 特性 。 
【示例 1】 下 面 示例 使 用 Object.create0 创 建 一 个 对 象 ， 它 继承 null， 即 把 null 作为 原型 ， 该 对 象 | 
包含 两 个 可 枚 举 的 属性 size 和 shape， 属 性 值 分 别 为 "large" 和 "round"。 


Var newObj = Object.create(null. { 
size: { 


入: | 
document write(newObj size + "<br> // large | 
document.write(newObj.shape + "<br/>"): // round | 

document write(Object getPrototypeOfnewObj)): /null | 

【示例 2】 下 面 示例 使 用 ObjectcreateO 创 建 一 个 与 Object 对 象 具有 相同 的 原型 对 象 。 该 对 象 具 | 

有 与 使 用 对 象 直 接 量 创建 的 对 象 相同 的 原型 。Object.getPrototypeOf 函数 可 获取 原始 对 象 的 原型 。 如 
果 要 获取 对 象 的 属性 描述 符 ， 可 以 使 用 Object.getOwnPropertyDescriptor 函数 。 

Var firstLine = {x: undefined. y: undefined}: 

var secondLine = Object.create(Object.prototype, { 
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A 


| document.write("first line prototype = "+ Object.getPrototypeOffirstLine)):; 
// first line prototype = [object Object] 
pie A 


| document. write("second line prototype = " + ObjectgetPrototypeOfsecondLine)): 
| /second line prototype = [object Object 


| 【示例 3】 下 面 示例 创建 一 个 对 象 ， 该 对 象 继承 于 Shape 对 象 ， 即 把 Shape 对 象 作 为 Square 对 象 
| 的 原型 。 
| 


| Var Shape = {twoDimensional: true, color undefined, hasLineSegments: undefined}: 


Var Square = Object.create(Shape); 
document.write(Square.twoDimensional); 


9.2 对象 的 基本 操作 


| 下面 简 单 介绍 对 象 的 基本 操作 ， 如 引用 、 复 制 、 克 隆 和 销毁 等 。 
9.2.1 引用 对 象 


| 在 创建 对 象 之 后 ， 可 以 把 对 象 的 地 址 赋值 给 变量 ， 实 现 变量 对 对 象 的 引用 。 当 把 变量 赋值 给 其 他 
| 变量 时 ， 则 实现 多 个 变量 引用 同一 个 对 象 。 
| 【示例 】 下 面 示例 定义 一 个 对 象 直接 量 ， 然 后 定义 变量 。， 引 用 该 对 象 直接 量 ， 当 o 赋值 给 ol 


| 后 ， 再 删除 变量 。 对 对 象 的 引用 ， 但 是 对 象 直接 量 依然 存在 。 


o={ // 创建 对 象 ， 并 引用 该 对 象 给 变量 o 

| wl 

| ytme 

| } 
ol=o: // 复制 变量 o 

| console.log(delete o): // 删除 变量 o， 返 回 值 为 tue， 说 明 删 除 成 功 

| console.log(01.x): // 读 取 对 象 内 数据 ， 显 示 为 1， 说 明 对 象 依然 存在 

| console.log(0.x): // 使 用 o 读 取 对 象 内 的 数据 ， 提 示 没 有 定义 对 象 

9.2.2 ”复制 对 象 
视频 讲解 | 复制 对 象 的 基本 方法 : 利用 for-in 语句 遍历 对 象 成 员 ， 然 后 逐一 复制 给 另 一 个 对 象 。 


| 【示例 】 在 下 面 示例 中 ,定义 一 个 下 类， 其 包含 4 个 成 员 。 然 后 实例 化 并 把 它 的 所 有 属性 和 方法 


”都 复制 给 一 个 空 对 象 。， 这 样 对 象 o。 就 复制 了 F 类 的 所 有 属性 和 方法 。 


| function F(x.y) { // 构造 函数 下 
| thisx=x: /1/ 本 地 属性 XxX 


| thisy=y: 1/ 本 地 属性 y 
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this.add = fonctionO { // 本 地 方法 add0 | 
Tetum this.x + this.y; | 

| 
| Ap 
Fprototype.mul = functionO { // 原型 方法 mul0 | 

Tetum this.x * this.y: | a 
有 
varf=newF(C2.3) // 实例 化 构造 函数 ， 并 进行 初始 化 ete 
varo={} / 定义 一 个 空 对 象 o | 
for(variinf) { / 遍历 实例 对 象 ， 把 它 的 所 有 成 员 赋 值 给 对 象 o | 

ol] = 人 {Ei]: | 
} | 
console.log(0.x): // 返回 2 | 
console.log(0.y): /1/ 返回 3 
console.log(0.addO); / 返回 5 
console.log(omul0): /1/ 返回 6 


| 
对 于 该 复制 法 ， 还 可 以 进行 封装 ， 使 其 具有 较 大 的 灵活 性 。 | 
Function prototype.extend = finction(o) { 7 为 Function 扩展 复制 的 方法 | 
for(variino) { // 遍历 参数 对 象 
thisconstructorprototype[i] = of]: / 把 参数 对 象 成 员 复制 给 当前 对 象 的 原型 对 象 
} 
} 
上 面 的 封装 函数 通过 原型 为 Function 类 型 对 象 扩 展 一 个 方法 , 该 方法 能 够 把 指定 的 参数 对 象 完全 
复制 给 当前 对 象 的 构造 函数 的 原型 对 象 。 
this 关键 字 指 向 的 是 当前 实例 对 象 ， 而 不 是 构造 函数 本 身 ， 所 以 要 为 其 扩展 原型 成 员 ， 就 必须 使 
用 constructor 属性 来 指向 它 的 构造 器 ， 然 后 通过 prototype 属性 指向 构造 函数 的 原型 对 象 。 
然后 ， 新 建 一 个 空 的 构造 函数 ， 并 为 其 调用 extend0 方 法 把 传递 进来 的 F 类 的 实例 对 象 完全 复制 
为 原型 对 象 成 员 。 注 意 ， 此 时 不 能 够 定义 对 象 直接 量 ， 因 为 extend0 方 法 只 能 够 为 构造 函数 结构 复制 
对 象 。 
var 0 一 function0 {}: // 新 建 空白 构造 函数 
o.extend(new F(2.3): // 调用 复制 继承 方法 


复制 操作 实际 上 是 通过 反射 机 制 复制 对 象 的 所 有 可 枚 举 属性 和 方法 来 模拟 继承 。 这 种 方法 能 够 实 
现 模拟 多 继承 。 不 过 ， 它 的 缺点 也 是 很 明显 。 


加 ”由 于 是 反射 机 制 ， 复 制 法 不 能 继承 非 枚 举 类 型 的 方法 。 对 于 系统 核心 对 象 的 只 读 方法 和 属 
通过 反射 机 制 来 复制 对 象 成 员 的 执行 效率 会 非常 差 。 当 对 象 结构 越 庞大 时 ， 这 种 低 效 就 越 | 
明显 。 | 
如 果 包 含 同 名 成 员 ， 这 些 成 员 可 能 会 被 动态 复制 所 覆盖 。 | 
9.2.3 克隆 对 象 


通过 克隆 对 象 可 以 避免 复制 对 象 操作 的 低 效率 ， 具 体 方法 如 下 。 
首先 ,为 Function 对 象 扩展 一 个 方法 , 该 方法 能 够 把 参数 对 象 赋值 给 一 个 空 构造 函数 的 原型 对 象 ， 
然后 实例 化 构造 函数 ， 并 返回 实例 对 象 ， 这 样 该 对 象 就 拥有 构造 函数 包含 的 所 有 成 员 。 


视频 讲解 


| 
| 
| 
| 
人 
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| 多 
Fanctionprototypeclone =function(o) { /对 象 克隆 方法 
| function Temp0 €}: / 新 建 空 构造 函数 
| Temp.prototype = 0: / 把 参数 对 象 赋值 给 该 构造 函数 的 原型 对 象 
A Tetum new TempO: / 返回 实例 化 后 的 对 象 
全 -| 二 
AN | 然后 ， 调 用 该 方法 来 克隆 对 象 。 克隆 方法 返回 的 是 一 个 空 对 象 , 不 过 它 存储 了 指向 给 定 对 象 的 原 
型 对 象 指针 。 这 样 就 可 以 利用 原型 链 来 访问 它们 ， 从 而 在 不 同 对 象 之 间 实 现 继 承 关系 。 
| var 0 = Function.clone(new F(2.3)): // 调用 Function 对 象 的 克隆 方法 
| console.log(0.x); 1/ 返回 2 
console log(o.y): / 返回 3 
console log(o.add0): / 返回 5 
console.log(omul0): // 返回 6 


9.2.4 销毁 对 象 


JavaScript 提供 一 套 垃圾 回收 机 制 , 能 够 自动 回收 无 用 存储 单元 。 当 对 象 没 有 被 任何 变量 引用 时 ， 
JavaScript 会 自动 侦 测 ， 并 运行 垃圾 回收 程序 把 这 些 对 象 注销 ， 以 释放 内 存 。 

每 当 函 数 对 象 被 执行 完毕 ,垃圾 回收 程序 就 会 自动 被 运行 ,释放 函数 所 占用 的 资源 ， 并 释放 局 部 
| 变量 。 另 外 ， 如 果 对 象 处 于 一 种 不 可 预知 的 情况 下 时 ， 也 会 被 回收 处 理 。 
【示例 】 当 对 象 不 被 任何 变量 引用 时 ，JavaScript 会 自动 回收 对 象 所 占用 的 资料 。 


varo={ // 创建 对 象 ， 并 引用 该 对 象 给 变量 o 
ls 
y: true 

} 

0=null; // 定义 对 象 引用 变量 为 null， 即 废除 对 象 


| 
”consolelog(ox); 。。“// 提示 系统 错误 ， 找 不 到 对 象 
| 


在 设计 中 ， 对 于 不 用 的 对 象 ， 应 该 把 其 所 有 引用 变量 都 设置 为 null， 将 对 象 废除 ， 用 来 释放 内 存 
空间 。 这 是 一 种 好 的 设计 习惯 ， 既 节省 系统 开支 ， 又 可 以 预防 错误 。 


9.3 读 写 属性 


| 属性 包括 键 名 和 键 值 。 属性 名 可 以 是 包含 空 字符 串 在 内 的 任意 字符 串 , 一 个 对 象 中 不 能 存在 两 个 
| 同名 的 属性 ， 属性 值 可 以 是 任意 JavaScript 值 ， 除 了 名 和 值 之 外 。 


9.3.1 定义 属性 


| 使 用 冒号 可 以 为 对 象 定义 属性 ， 冒 号 左 侧 是 属性 名 ， 右 侧 是 属性 值 。 属 性 与 属性 之 间 通 过 逗号 运 
| 算 符 进行 分 隔 。 

| 【示例 1】 在 下 面 示例 中 ， 定 义 了 一 个 三 层 嵌 套 的 对 象 结 构 。 虽 然 三 层 嵌 套 对 象 都 包含 相同 的 属 
| 性 名 ， 但 是 由 于 它们 分 别 属于 不 同 的 作用 域 ， 因 此 不 会 发 生 冲突 。 

| varo=t // 定义 一 级 对 象 


| i 
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y{ / 定义 二 级 嵌 套 对 象 | 
2 | 
yt{ / 定义 三 级 嵌 套 对 象 | 

和 有 
下 false 
} 
} 
} | 
【示例 2】 除 了 在 对 象 结构 体内 定义 属性 外 ， 还 可 以 通过 点 运算 符 在 结构 体外 定义 属性 。 | 
ee // 定义 空 对 象 | 
OX // 定义 对 象 的 属性 | 
oy={ // 定义 对 象 的 属性 ， 该 属性 的 值 是 一 个 嵌 套 对 象 | 
| 
y: tue 
} | 
【示例 3】 也 可 以 通过 构造 函数 定义 属性 。 | 
| 
varo= fanction0 { // 定义 构造 对 象 | 
this.x= 1; // 定义 对 象 属性 | 
thisy={ // 定义 包含 对 象 的 属性 | 
| 
y: true | 
} | 
i | 
在 声明 变量 时 使 用 var 语句 ， 但 是 在 声明 对 象 属性 时 不 能 使 用 var 语句 。 
【拓展 】 


ECMAScript 5 增加 两 个 静态 函数 ， 用 来 为 指定 对 象 定义 属性 : ObjectdefineProperty 和 
Object.defineProperties。 下 面 分 别 进行 说 明 。 
1. Object.defineProperty | 
Object.defineProperty 可 以 将 属性 添加 到 对 象 ， 或 者 修改 现 有 属性 的 特性 。 使 用 | 
Object.defineProperty 可 以 完成 下 面 操作 。 
回 ”将 新 属性 添加 到 对 象 ， 在 对 象 没 有 指定 的 属性 名 称 时 执行 此 操作 。 
修改 现 有 属性 的 特性 ， 在 对 象 已 有 指定 的 属性 名 称 时 执行 此 操作 。 
具体 用 法 如 下 。 
ObjectdefineProperty(object propertyname. descriptor) 
参数 说 明 如 下 。 
回 ”object， 必需 参 数 ， 指 定 要 添加 或 修改 属性 的 对 象 ， 可 以 是 JavaScript 本 地 对 象 〈 用 户 定义 | 
对 象 或 内 置 对 象 ) 或 DOM 对 象 。 | 
propertyname: 必需 参数 ， 表 示 一 个 包含 属性 名 称 的 字符 串 。 
descriptor: 必需 参数 ， 定 义 属 性 的 描述 符 ， 它 可 以 针对 数据 属性 或 访问 器 属性 。 在 描述 符 
对 象 中 提供 了 属性 定义 ， 它 描述 了 数据 属性 或 访问 器 属性 的 特性 。 描 述 符 对 象 是 
ObjectdefineProperty 函数 的 参数 。 
Object.defineProperty 返回 值 为 已 修改 的 对 象 。 


办 办 
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| 【示例 4] 下 面 示例 先 创建 一 个 对 象 直接 量 obj， 然 后 使 用 ObjectdefineProperty 函数 将 数据 属性 
| 添加 到 用 户 定义 的 obj 对 象 中 。 定 义 属性 newDataProperty， 值 为 101， 可 写 ， 可 枚 举 ， 可 修改 特性 。 
WE 
‘Object.defineProperty(obj. "newDataProperty". { 

value: 101, 


| writable: true, 
enumerable: true, 


| configurable: true 
| DD: 

obj.newDataProperty = 102: 
| document.write(obj.newDataProperty ); // 102 
【示例 5】 在 下 面 示例 中 ， 使 用 Object.defineProperty 函数 将 访问 器 属性 添加 到 用 户 定义 对 象 obj 
| 上 。 当 为 对 象 obj 的 newAccessorProperty 属性 传递 新 值 时 ， 设 置 其 值 为 赋值 的 平方 ,而 当 读 取 该 属性 
| 值 时 ， 会 以 一 级 标题 的 形式 显示 ， 即 输出 值 为 HTML 字符 串 。 


varobj={}; 
| Obiject.defineProperty(obi, "newAccessorProperty", { 
| set: function(x) { 
this.newaccpropvalue = x*x; 
六 
get: fonctiongO { 
retum "<h1>" + this.newaccpropvalue + "</h1>" ; 
}, 
enumerable: true, 
configurable: true 
D); 
| ; 和 
| obj.newAccessorProperty = 30: 
| document.write(obj.newAccessorProperty); // <h1>900</h1> 
| 


2. Object.defineProperties 
| 如 果 要 将 多 个 属性 添加 到 对 象 或 要 修改 多 个 现 有 属性 ， 可 以 使 用 Object.defineProperties 函数 。 
| 其 体 用 法 如 下 。 
| object.defineProperties(object. descriptors) 

参数 说 明 如 下 。 
| 回 object: 必需 参数 ， 对 其 添加 或 修改 属性 的 对 象 ， 可 以 是 本 地 对 象 或 DOM 对 象 。 
| 回 descriptors: 必需 参数 ， 包 含 一 个 或 多 个 描述 符 对 象 。 每 个 描述 符 对 象 描述 一 个 数据 属性 或 
| 访问 器 属性 。 
| 【示例 6】 在 下 面 示例 中 ， 使 用 Object.defineProperties 函数 将 数据 属性 和 访问 器 属性 添加 到 用 户 
| 定义 的 对 象 obj 上 。 代 码 使 用 对 象 文本 创建 具有 newDataProperty 和 newAccessorProperty 描述 符 对 
| | 象 的 descriptors 对 象 。 


Var obj = 0: 
Objectdefineproperties(obj.{ 
newDataProperty: { 

| value: 101. 
| writable: true. 
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了 
obj.newAccessorProperty = 10: 
document write( obj.newAccessorProperty ): // 10 


9.3.2 访问 属性 


通过 点 运算 符 可 以 访问 对 象 属性 ， 点 运算 符 左 侧 是 对 象 引 用 的 变量 ， 右 侧 是 属性 名 ， 属 性 名 必须 
是 一 个 标识 符 ， 而 不 是 一 个 字符 串 。 
【示例 1】 针 对 9.3.1 节 示例 定义 的 对 象 ， 使 用 下 面 代码 可 以 访问 最 里 层 对 象 属性 y 的 值 。 
console.log(0.y.y.y), / 读 取 第 三 层 对 象 的 属性 y 的 值 ， 返 回 false 


对 象 属性 与 变量 的 工作 方式 相似 ,性 质 相同 ， 用 户 可 以 把 属性 看 作 是 对 象 的 私有 变量 ,用 来 存储 | 


数据 。 
【示例 2】 从 结构 上 分 析 ， 对 象 与 数组 相似 ， 因 此 可 以 使 用 中 括号 来 访问 对 象 属性 。 针 对 上 面 示 
例 ， 可 以 使 用 如 下 方式 来 读 取 最 内 层 的 对 象 属性 y 的 值 。 
console.log(of"y"]["y"]["y"]), // 读 取 第 三 层 对 象 的 属性 y 的 值 ， 返 回 false 
以 数组 形式 读 取 对 象 属性 值 时 ， 应 以 字符 串 形式 指定 属性 名 ， 而 不 能 够 使 用 标识 符 。 
【示例 3】 对 象 是 属性 的 集合 ， 因 此 可 以 使 用 forin 语句 来 遍历 对 象 属性 。 这 对 于 无 法 确定 对 象 
包含 属性 时 ， 是 非常 有 用 的 。 


o={ // 定义 对 象 
买 业 
y2, 
Cask 
: 
for(variin o) { // 遍历 对 象 属性 
console.log(o[i]): / 读 取 对 象 的 属性 值 
} 


使 用 for-in 语句 遍历 对 象 属性 时 ， 应 该 使 用 数组 操作 方式 来 读 取 对 象 属性 的 值 ， 属 性 没有 固定 显 
示 顺 序 ， 同 时 也 只 能 够 枚 举 自 定义 属性 ， 无 法 枚 举 某 些 预定 义 属性 。 


深 提示 : 如 果 读 取 不 存在 的 属性 时 ， 不 会 抛 出 异常 ， 而 是 返回 undefined。 
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【拓展 】 
| ECMAScript 5 新 增 4 个 函数 用 来 访问 对 象 属性 :Object.getPrototypeOf、Object.getOwnProperty 
| Names、Objectkeys 和 Object.getOwnPropertyDescriptor， 具 体 说 明 如 下 。 


又 1. Object.getPrototypeOf 
Object.getPrototypeOf 能 够 返回 指定 对 象 的 原型 ， 具 体 用 法 如 下 。 
| ObjectgetPrototypeOfobjecb 


参数 object 表示 指定 的 对 象 。 返 回 值 是 参数 object 的 原型 对 象 。 
【示例 4】 在 下 面 示例 中 ， 构 造 一 个 类 型 Pasta， 使 用 new 运算 符 实例 化 Pasta， 然 后 使 用 
Object.getPrototypeOf 函数 获取 实例 对 象 spaghetti 的 原型 ， 最 后 使 用 该 实例 对 象 的 原型 属性 
(Pasta.prototype) 与 Object.getPrototypeOf 返回 值 比较 ， 返 回 值 为 tme。 
function Pasta(grain, width) { 
this.grain = grain: 
this.width = width; 


} 

Var spaghetti = new Pasta("wheat", 0.2); 

Var proto = Object.getPrototypeOf(spaghetti): 
document.write(proto 一 二 Pasta.prototype); /tme 


2. Object.getOwnPropertyNames 
| Object.getOwnPropertyNames 能 够 返回 指定 对 象 私有 属性 的 名 称 。 私 有 属性 是 指 直接 对 该 对 象 定 
| 义 的 属性 ， 而 不 是 从 该 对 象 的 原型 继承 的 属性 ， 有 具体 用 法 如 下 。 


Object.getOwnPropertyNames(object) 


| 

| 参数 object 表示 一 个 对 象 ,返回 值 为 一 个 数组 ， 其 中 包含 对 象 私有 属性 的 名 称 。 其 中 包括 可 枚 举 的 
| | 和 不 可 枚 举 的 属性 和 方法 的 名 称 。 如 果 仅 返回 可 枚 举 的 属性 和 方法 的 名 称 , 应 该 使 用 Objectkeys 函数 。 
| 【示例 5】 在 下 面 示例 中 创建 一 个 对 象 ， 该 对 象 包含 3 个 属性 和 一 个 方法 。 然 后 使 用 
| getOwnPropertyNames 获取 该 对 象 的 私有 属性 (包括 方法 )。 

| function Pasta(grain. width. shape) { 

| 


this.grain = grain; 
this.width = width: 
this.shape = shape: 
this.toString = function| { 
Tetum (this.grain + ", "+ this.width + " " + this.shape): 


} 
: 
Var spaghetti = new Pasta("wheat". 0.2. "circle"): 
Var arr = Object.getOwnPropertyNames(spaghetti): 
document write (arD): // 返回 私有 属性 : grain,width.shape,toString 


3. Object.keys 


与 Object.getOwnPropertyNames 类 似 , 但 是 Object.keys 仅 能 够 返回 指定 对 象 可 枚 举 属性 和 方法 的 
| | 具体 用 法 如 下 。 
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Objectkeys(objecD 
参数 object 表示 指定 对 象 ， 可 以 是 创建 的 对 象 或 现 有 DOM 对 象 。 返 回 值 是 一 个 数组 ， 其 中 包含 
对 象 的 可 枚 举 属性 和 方法 的 名 称 。 
4. Object.getOwnPropertyDescriptor 
Object.getOwnPropertyDescriptor 能 够 获取 指定 对 象 的 私有 属性 的 描述 符 ， 具 体 用 法 如 下 。 
Object.getOwnPropertyDescriptor(object, propertyname) 
参数 object 表示 指定 的 对 象 ，propertyname 表示 属性 的 名 称 。 返 回 值 为 属性 的 描述 符 对 象 。 
【示例 6】 在 下 面 示例 中 创建 一 个 对 象 obj ， 添 加 属性 newDataProperty， 然 后 使 用 Object. 
getOwnPropertyDescriptor 获取 该 数据 属性 描述 符 ， 并 使 用 该 描述 符 将 属性 设置 为 只 读 。 最后， 再 调用 
Object.defineProperty 函数 , 使 用 descriptor 描述 符 修改 属性 newDataProperty 的 特性 。 遍历 修改 后 的 对 | 
象 ， 可 以 发 现 只 读 特 性 writable 为 false， 如 图 9.1 所 示 。 | 
varobj= {}: | 
obj.newDataProperty = "abce"; | 
Var descriptor = Object.getOwnPropertyDescriptor(obj. "newDataProperty"): ! 
descriptor. writable = false; 
Object.defineProperty(obj, "newDataProperty", descripton); 
Var desc2 = Object.getOwnPropertyDescriptor(obj, "newDataProperty"): 


一 旦 为 未 命名 的 属性 赋值 后 ， 对 象 会 自动 创建 该 名 称 的 属性 ， 在 任何 时 候 和 位 置 为 该 属性 赋值 ， 
都 不 需要 创建 属性 ， 而 只 会 重新 设置 它 的 值 。 


for (var prop in desc2) { 
document.write(prop + ": ' + desc2[prop]): 
document.write("<br />"): 
) 
| 
Sa Blocalhost | 
| 
configurable true | 
9.1 遍历 本 地 对 象 的 所 有 特性 
9.3.3 ”赋值 属性 
设置 对 象 属性 的 值 也 可 以 使 用 点 运算 符 和 数组 操作 方法 来 实现 。 | 
【示例 1】 下面 代码 使 用 点 运算 符 和 中 括号 运算 符 读 取 属性 。 | 
varo={ // 定义 对 象 | 
soil | 
y2 | 
} | 
Ox=2: // 设置 属性 的 新 值 ， 将 覆盖 原来 的 值 | 
of"y"]=1: / 设置 属性 的 新 值 ， 将 覆盖 原来 的 值 | 
console.log(o["x"]): / 返回 2 | 
console log(o.y): // 返回 1 | 
| 
| 
| 
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| 9.3.4 删除 属性 


使 用 delete 运算 符 可 以 删除 对 象 属性 ， 这 与 变量 操作 相同 。 
【示例 1】 下 面 示例 使 用 delete 运算 符 删除 指定 属性 。 


varo= {x: 1} // 定义 对 象 
delete ox: // 删除 对 象 的 属性 x 
console.log(0.x): // 返回 undefined 


| 当 删 除 对 象 属性 之 后 ， 不 是 将 该 属性 值 设置 为 undefined， 而 是 从 对 象 中 彻底 清除 属性 。 如 果 使 
| 用 for-in 语句 枚 举 对 象 属性 ， 只 能 枚 举 属性 值 为 undefined 的 属性 ， 但 不 会 枚 举 已 删除 属性 。 


| AR 

9.3.5 ”对象 方法 

方法 是 对 象 执行 特定 行为 的 逻辑 块 ， 在 JavaScript 中 ， 方 法 (Method) 就 是 对 象 属性 的 一 种 特殊 
| 形式 ， 即 值 为 函数 的 属性 。 

| 【示例 1】 函 数 被 赋值 给 对 象 的 属性 ， 于 是 该 属性 就 是 对 象 的 一 个 方法 。 

| 


varo={ 
x: function| { // 定义 对 象 的 方法 
console.log("method"): 


| 
| 本 本 
| 也 可 以 通过 如 下 方式 定义 对 象 的 方法 。 
varo={} 
| ox= fonction0 { // 定义 对 象 的 方法 
| console.log("method"); 
| } 
使 用 小 括号 运算 符 可 以 调用 对 象 的 方法 。 
oxO: // 调用 对 象 的 方法 
【示例 2】 对 象 的 方法 内 部 都 包含 一 个 this 关键 字 ， 它 总 是 表示 调用 对 象 。 例 如 ， 在 对 象 o 的 x0 
| 方法 中 访问 当前 对 象 的 y 属 性 值 。 当 使 用 不 同 对 象 调用 时 ， 则 返回 值 也 不 相同 。 


varo={ 
| x: function0 { / 定义 对 象 的 方法 
| console.log(this.y): / 访问 当前 对 象 的 属性 y 的 值 
| b 

> 

oO.xO: // 返回 undefined， 此 时 this 指向 对 象 o 
| varf=0: // 复制 对 象 o 为 f 
| fy=2 / 为 对 象 f 单 独 定义 属性 y， 赋 值 为 2 
| fxO: // 返回 2， 此 时 this 指向 对 象 f 
| 

【示例 3】 对 象 方法 与 普通 函数 用 法 完全 相同 ， 可 以 在 方法 中 传递 参数 ， 可 以 设计 返回 值 。 

Lo 
| oxX= function(a) { // 定义 对 象 的 方法 
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Tetum 10 * a: | 
} 
var f= 0.x(5): // 调用 方法 ， 设 置 参 数 为 5 | 
console.log(: // 返回 值 50 ! 
【拓展 】 
关键 字 this 总 是 指向 当前 调用 的 对 象 。 
var 0 = new ObjectO:; // 对 象 实例 化 
omname = "0"; / 声明 并 初始 化 对 象 属性 
owho= function0 { // 定义 对 象 方法 | 
consolelog(this name): // 显示 当前 对 象 的 名 称 | 
} | 
o-who0: // 返回 字符 o | 


在 上 面 示例 中 ，this 指向 对 象 o， 即 定义 该 方法 的 对 象 自身 。 当 然 ， 用 户 可 以 使 用 对 象 名 o 引用 | 
当前 调用 对 象 。 | 


| 
var 0 = new Object(O: 1/ 对 象 实例 化 | 
| 


omame= "0"; // 声明 并 初始 化 对 象 属性 | 
owho = functionO { // 定义 对 象 方法 | 
console.log(o.name); // 显示 对 象 o 的 名 称 | 

) | 
o.who(); // 返回 字符 o | 
| 


但 是 , 对 于 构造 对 象 来 说 , 当 对 象 实例 化 后 , 用 户 无 法 调用 当前 方法 的 实例 对 象 的 名 称 , 使 用 this 
能 确保 在 不 同 环境 下 都 能 找到 调用 当前 方法 的 对 象 。 


function whoO { // 定义 一 个 抽象 化 方法 | 
console.log(this.name); | 
} | 
var 0 = new ObjectO: // 实例 化 对 象 o | 
omname = "0"; // 命名 为 o | 
oO-who = who; 4 引用 抽象 化 方法 who | 
Varf= new ObjectO: / 实例 化 对 象 f | 
fname ="f"': // 命名 为 f | 
人 who = who: / 引用 抽象 化 方法 who | 
0.whoO; / 调用 对 象 o 的 方法 who， 返 回 字符 o 
fwho0: / 调用 对 象 f 的 方法 who， 返 回 字符 f 


在 上 面 示例 中 ， 首 先 使 用 this 关键 字 定义 一 个 公共 方法 ， 然 后 创建 两 个 对 象 。 和 f， 分 别 设置 它 

们 的 属性 name 值 为 和 f， 并 绑 定 公 共 方 法 。 但 是 分 别 调用 不 同 对 象 的 who 方法 时 ， 会 发 现 返 回 值 | 

是 不 同 的 。 这 是 因为 在 对 象 。 中 ，this 指向 对 象 自身 ,而 在 f 对 象 中 ,this 又 指向 对 象 了 自身 ， 从 而 | 

实现 使 用 this 关键 字 进行 对 象 抽象 化 操作 。 

次 提示 : 构造 函数 是 一 类 特殊 函数 ， 它 能 够 初始 化 对 象 ， 利 用 参数 初始 化 this 关键 字 所 引用 对 象 的 
X 和 y 属 性 值 。 因 此 ， 构 造 函 数 就 相当 于 对 象 结构 模板 ， 利 用 它 可 以 实例 化 包含 相同 属性 
但 不 同属 性 值 的 对 象 。 


function {0 { / 定义 方法 
Tetum this.x + this.y: 
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一 
| 和 这 
世人 
} 
| function MyClass(x.y) { // 自 定义 类 
| this.x=x: 
| thisy=y: 
优 站 | this.add =£ / 把 方法 封装 在 类 中 ， 这 样 每 个 实例 都 拥有 该 方法 
| } 
var 0 =new MyClass(10.20): // 实例 化 类 ， 并 初始 化 参数 值 
| console.log(0.addO); // 调用 方法 ， 返 回 值 30 


9.4 使 用 Object 对 象 


JavaScript 原生 提供 Object 对 象 , 其 他 所 有 对 象 都 继承 自 Object 对 象 , 都 是 Object 

的 实例 。Object 对 象 的 原生 方法 分 成 两 类 : Object 本 身 的 方法 与 Object 的 实例 方法 。 
Object 对 象 本 身 的 方法 ， 也 称 为 静态 方法 ， 就 是 直接 定义 在 Object 对 象 的 方法 。 

比较 说 明 请 扫 码 阅读 。 

“9.4.1 Object 函数 


| Object 本 身 是 一 个 函数 ， 可 以 作为 工具 使 用 ， 将 任意 值 转 为 对 象 。 这 个 方法 常用 于 保证 某 个 值 一 
| 定 是 对 象 。 具 体 演示 代码 说 明 请 扫 码 阅读 。 


| 9.4.2 Object 构造 函数 


| Object 不 仅 可 以 当 作 工具 函数 使 用 ， 还 可 以 当 作 构造 函数 使 用 ， 使 用 new 命令 来 生成 新 对 象 。 具 
| 体 演示 代码 说 明 请 扫 码 阅读 。 
9.4.3 使 用 Object 静态 方法 

静态 方法 是 指 部 署 在 Object 对 象 自身 的 方法 。 详 细 内容 和 演示 代码 说 明 请 扫 码 阅读 。 
| 9.4.4 “使 用 Object 实例 方法 
除了 静态 方法 ， 还 有 不 少 定义 在 Objectprototype 对 象 上 的 实例 方法 ， 所 有 Object 的 实例 对 象 都 
| 继承 了 这 些 方法 。 详 细 说 明 请 扫 码 阅读 。 


9.5 使 用 包装 对 象 


有 人 说 ，JavaScript 语言 “一 切 皆 对 象 "。 这 是 因为 数组 和 函数 本 质 上 都 是 对 
象 ， 就 连 3 种 原始 类 型 的 值 : 数值 、 字 符 串 、 布 尔 值 ， 在 一 定 条 件 下 也 会 自动 转 
为 对 象 ， 即 原始 类 型 的 “包装 对 象 ”。 什 么 是 包装 对 象 ， 请 扫 码 阅读 。 


线 上 阅读 
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9.5.1 包装 对 象 的 实例 方法 


包装 对 象 实例 可 以 使 用 Object 对 象 提供 的 原生 方法 ， 主 要 是 valueOf0 方 法 
和 toString0 方 法 。 详 细 说 明 请 扫 码 阅读 。 


9.5.2 ”原始 类 型 的 自动 转换 


原始 类 型 的 值 ， 可 以 自动 当 作 对 象 调用 ， 即 调用 各 种 对 象 的 方法 和 参数 。 
JavaScript 引擎 会 自动 将 原始 类 型 的 值 转 为 包装 对 象 ， 在 使 用 后 立刻 销毁 。 详 细 
说 明 请 扫 码 阅读 。 


9.5.3 自 定 义 方法 


3 种 包装 对 象 还 可 以 在 原型 上 添加 自 定义 方法 和 属性 ， 供 原始 类 型 的 值 直 接 
调用 。 详 细 说 明 请 扫 码 阅读 。 


9.5.4 Boolean 对 象 
Boolean 对 象 是 JavaScript 的 3 个 包装 对 象 之 一 。 作 为 构造 函数 ， 它 主要 用 
于 生成 布尔 值 的 包装 对 象 的 实例 。 详 细 说 明 请 扫 码 阅读 。 


9.6 使 用 属性 描述 对 象 


JavaScript 提供 了 一 个 内 部 数据 结构 ， 用 来 描述 一 个 对 象 的 属性 的 行为 ， 控 制 它 的 行为 。 这 个 内 
部 数据 结构 被 称 为 “属性 描述 对 象 ”(Attributes Object)。 每 个 属性 都 有 自己 对 应 的 属性 描述 对 象 ， 保 
存 该 属性 的 一 些 元 信息 。 
9.6.1 认识 属性 描述 对 象 
下 面 是 属性 描述 对 象 的 一 个 实例 。 
{ 
value: 123, 
writable: false. 
enumerable: true. 
configurable: false. 
get undefined. 
set: undefined 
} 


属性 描述 对 象 提供 6 个 元 属性 。 详 细 说 明 请 扫 码 阅读 。 


线 上 阅读 
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| 9.6.2 Object.getOwnPropertyDescriptor() 


_ [sse 网 页 病程 从 入 门 到 精通 ( 币 课 精 编 县 ) 


Object.getOwnPropertyDescriptor() 方 法 可 以 读 出 对 象 白 身 属性 的 属性 描述 对 象 。 详 细 说 明 请 扫 码 


| 阅读 。 
9.6.3 Object.defineProperty() 和 Object.defineProperties() 
回 


Object.defineProperty0 方 法 允许 通过 定义 属性 描述 对 象 ， 来 定义 或 修改 一 个 属性 ， 


然后 返回 修改 后 的 对 象 。 详 细 说 明 请 扫 码 阅读 。 


| 线 上 阅读 
| 9.6.4 元 属性 


| 属性 描述 对 象 的 属性 ， 被 称 为 “元 属性 ”， 因 为 它 可 以 看 作 是 控制 
下 | 举 性 、 可 配置 性 、 可 写 性 。 详 细 说 明 请 扫 码 阅读 。 


9.6.5 Object.getOwnPropertyNames() 


属性 的 属性 。 元 


属性 包括 可 枚 


Object.getOwnPropertyNames() 方 法 返回 直接 定义 在 某 个 对 象 上 面 的 全 部 属性 的 名 称 , 而 不 管 该 属 


| 性 是 否 可 枚 举 。 详 细 说 明 请 扫 码 阅读 。 
| 9.6.6 Object.prototype.propertylsEnumerable() 


对 象 实例 的 propertyIsEnumerable() 方 法 用 来 判断 一 个 属性 是 否 可 枚 举 。 详 细 说 明 请 扫 码 阅读 。 


中 96.7 存 取 器 


除了 直接 定义 以 外 ， 属 性 还 可 以 用 存 取 器 (Accessor) 定义 。 其 中 ， 存 值 函数 称 为 setter， 使 用 


禁止 赋值 。 详 细 说 明 请 扫 码 阅读 。 


| 9.6.8 ”对 象 的 拷贝 


| set 命令 ， 取 值 函数 称 为 getter， 使 用 get 命令 。 利 用 这 个 功能 ， 可 以 实现 许多 高 级 特性 ， 如 每 个 属性 


如 果 需 要 将 一 个 对 象 的 所 有 属性 拷贝 到 另 一 个 对 象 ， 需 要 手动 实现 。 详 细 说 明 请 扫 码 阅读 。 


”9.6.9 控制 对 象 状 态 


JavaScript 提供 了 3 种 方法 ， 精 确 控制 一 个 对 象 的 读 写 状态 ， 防 止 对 象 被 改变 。 最 弱 一 层 的 保护 


9.7 使 用 Math 对 象 


明 请 扫 码 阅读 。 


"20% 


| 是 ObjectpreventExtensions， 其 次 是 Object.seal， 最 强 的 是 Object.freeze。 详 细 说 明 请 扫 码 阅读 。 


Math 是 JavaScript 的 内 置 对 象 ， 提 供 一 系列 数学 常数 和 数学 方法 。 该 对 象 不 是 
构造 函数 ， 不 能 生成 实例 ， 所 有 的 属性 和 方法 都 必须 在 Math 对 象 上 调用 。 具 体 说 
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9.7.1 Math 属性 

Math 对 象 提供 以 下 一 些 只 读 的 数学 常数 。 详 细 说 明 请 扫 码 阅读 。 
9.7.2 ”Math 方法 

Math 对 象 提供 一 些 数学 方法 。 详 细 说 明 请 扫 码 阅读 。 


9.8 使 用 Date 对 象 


Date 对 象 是 JavaScript 提供 的 日 期 和 时 间 的 操作 接口 。 它 可 以 表示 的 时 间 范 围 
是 1970 年 1 月 1 日 00:00:00 前 后 的 各 1 亿 天 (单位 为 毫秒 )。 具 体 说 明 请 扫 码 阅读 。 


9.8.1 创建 Date 对 象 


Date 可 以 当 作 构 造 函 数 使 用 。 对 它 使 用 new 命令 ， 会 返回 一 个 Date 对 象 的 实 
例 。 如 果 不 加 参数 ， 生 成 的 就 是 代表 当前 时 间 的 对 象 。 作 为 构造 函数 时 ，Date 对 象 
可 以 接受 多 种 格式 的 参数 。 详 细 说 明 请 扫 码 阅读 。 


9.8.2 日 期 运算 


类 型 转换 时 ，Date 对 象 的 实例 如 果 转 为 数值 ， 则 等 于 对 应 的 毫秒 数 ， 如 果 转 为 
字符 串 ， 则 等 于 对 应 的 日 期 字符 串 。 所 以 ， 两 个 日 期 对 象 进行 减法 运算 ， 返 回 的 就 
是 它们 间隔 的 毫秒 数 ， 进 行 加 法 运算 ， 返 回 的 就 是 连接 后 的 两 个 字符 串 。 详 细 说 明 
请 扫 码 阅读 。 


9.8.3 Date 静态 方法 


Date 静态 方法 包括 3 个 : Date.now0、Date.parse0 和 Date.UTCO。 详 细 说 明 请 扫 
码 阅 读 。 


9.8.4 _ Date 实例 方法 


Date 的 实例 对 象 ， 有 几 十 个 自己 的 方法 ， 分 为 to 类 、get 类 和 set 类 3 类 。 详 细 
说 明 请 扫 码 阅读 。 


9.9 使 用 JSON 对 象 


JSON 格式 (JavaScript Object Notation 的 缩写 ) 是 一 种 用 于 数据 交换 的 文本 格 
式 ，2001 年 由 Douglas Crockford 提出 。 如 何 正 确 理解 和 编写 JSON 格式 数据 ， 请 
扫 码 阅读 。 
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#9.9.1 JSON.stringify() 


| JSON.stringify0 方 法 用 于 将 一 个 值 转 为 字符 串 .该 字符 串 符 合 JSON 格式 , 并且 可 以 被 JSON.parse 
| 方法 还 原 。 详 细 说 明 请 扫 码 阅读 。 


| 9.9.2 JSON.parse() 
局 JSON.parse0 方 法 用 于 将 JSON 字符 串 转化 成 对 象 。 详 细 说 明 请 扫 码 阅读 。 


线 上 阅读 


9.9.3 比较 JSON 与 XML 
| 与 XML 相 比 ，JSON 有 很 多 优点 ， 它 是 高 性 能 Ajax 的 基石 。 详 细 说 明 请 扫 码 阅读 。 
9.9.4 优化 JSON 数据 


JSON 是 一 个 轻 量 级 并 易于 解析 的 数据 格式 ， 它 按照 JavaScript 对 象 和 数组 字面 语法 来 编写 。 在 
| 编写 JSON 格式 时 ， 一 定 要 注意 结构 的 简练 和 直 白 。 详 细 说 明 请 扫 码 阅读 。 


9.10 使 用 console 对 象 


console 对 象 是 JavaScript 的 原生 对 象 ， 可 以 输出 各 种 信息 到 控制 台 。 简 单 说 明 请 扫 码 阅读 。 
| 9.10.1 浏览 器 实现 
console 对 象 的 浏览 器 实现， 包含 在 浏览 器 自 带 的 开发 工具 之 中 。 详 细 说 明 请 扫 码 阅读 。 


9.10.2 ”console 对 象 的 方法 
”console 对 象 提供 的 各 种 方法 ， 用 来 与 控制 台 窗 口 互动 。 详 细 说 明 请 扫 码 阅读 。 
| 9.10.3 命令 行 API 


| 在 控制 台中 ， 除 了 使 用 console 对 象 ， 还 可 以 使 用 一 些 控制 台 自 带 的 命令 行 方法 。 详 细 说 明 请 扫 
| 码 阅读 。 


| 9.10.4 debugger 语句 
debugger 语句 主要 用 于 除 错 ， 作 用 是 设置 断 点 。 详 细 说 明 请 扫 码 阅读 。 
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面向 对 象 编程 


面向 对 象 编程 (OOP ) 是 目前 主流 的 编程 范式 ， 它 将 真实 世界 各 种 复杂 的 关系 ， 抽 象 为 
一 个 个 对 象 ， 然 后 由 对 象 之 间 的 分 工 与 合作 ， 完 成 对 真实 世界 的 模拟 。 每 一 个 对 象 都 是 功能 
中 心 ， 具 有 明确 分 工 ， 可 以 完成 接 妥 信息、 处 理 数据 、 发 出 信息 等 任务 。 因 此 ， 面 向 对 象 编 
程 具有 高 度 模块 化 将 点 ， 容 易 维护 ， 适 合 开发 复杂 的 应 用 项 目 

JavaScript 是 基于 对 象 的 编程 语言 ， 具 有 较 强 的 面向 对 象 编程 能 力 ， 本 章 将 详细 讲解 
JavaScript 面向 对 象 编程 的 基本 方法 


【 学 习 重 点 】 

WI 理解 构造 函数 和 this 

能 够 定义 JavaScript 类 型 。 

党 可 JavaScript 原型 模型 和 继承 

正确 使 用 JavaScript 设计 基于 对 象 的 Web 程序 


吾 吾 于 
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10.1 面向 对 象 基础 


俊国 
在 面向 对 象 编程 中 ， 有 两 个 最 基本 的 概念 : 对 象 和 类 。 在 ECMAScript 6 规范 之 前 ，JavaScript 
区 没有 类 的 概念 ， 允 许 通过 构造 函数 来 模拟 类 ， 下 面 来 了 解 一 下 。 


10.1.1 对 象 


对 象 (Objeet) 到 底 是 什么 ? 我 们 从 两 个 层次 来 理解 。 
1. 对 象 是 单个 实物 的 抽象 
一 张 桌子 、 一 辆 汽车 、 一 部 手机 都 可 以 是 对 象 ， 一 个 图 表 、 一 张 网 页 、 一 个 URL 连接 也 可 以 是 
| 对 象 。 当 实物 被 抽象 成 对 象 ， 实 物 之 间 的 关系 就 变 成 对 象 之 间 的 关系 ， 从 而 就 可 以 模拟 现实 情况 ， 针 
对 对 象 进行 编程 。 

2. 对 象 是 一 个 容器 ， 封 装 了 属性 〈Property) 和 方法 (Method) 

属性 是 对 象 的 状态 , 方法 是 对 象 的 行为 (完成 某 种 任务 )。 例如 , 可 以 把 动物 抽象 为 animal 对 象 ， 
使 用 “属性 ”记录 具体 是 哪 一 种 动物 ,使 用 “方法 ”表示 动物 的 某 种 行为 (奔跑 、 捕 猫 、 休 息 等 )。 


10.1.2 ”构造 函数 


面向 对 象 编程 的 第 一 步 ， 就 是 要 生成 对 象 。 前 面 说 过 ， 对 象 是 单个 实物 的 抽象 。 通常 需 要 一 个 模 
板 ， 表 示 某 一 类 实物 的 共同 特征 ， 然 后 对 象 根 据 这 个 模板 生成 。 

典型 的 面向 对 象 编程 语言 (如 C+t+ 和 Java)， 存 在 “类 ”(Class) 这 个 概念 。 所 谓 “ 类 ”就 是 对 
象 的 模板 ， 对 象 就 是 “类 ”的 实例 。 但 是 ，JavaScript 语言 的 对 象 体系 ， 不 是 基于 “类 ”的 ， 而 是 基 
于 构造 函数 (Constructor) 和 原型 链 (Prototype )。 

JavaScript 语言 使 用 构造 函数 〈Constructor) 作为 对 象 的 模板 。 所 谓 “构造 函数 ”， 就 是 专门 用 来 
生成 对 象 的 函数 。 它 提供 模板 ， 描 述 对象 的 基本 结构 。 一 个 构造 函数 ， 可 以 生成 多 个 对 象 ， 这 些 对 象 
都 有 相同 的 结构 。 

构造 函数 的 写法 就 是 一 个 普通 的 函数 ， 但 是 有 自己 的 特征 和 用 法 。 例 如 : 

var F = function0 { 

this.price = 1000: 


上 

| 在 上 面 代码 中 ，F 就 是 构造 函数 ， 它 提供 模板 ， 用 来 生成 实例 对 象 。 为 了 与 普通 函数 区 别 ， 构 造 
| 函数 名 字 的 第 一 个 字母 通常 大 写 。 

| 构造 函数 的 特点 有 两 个 。 

| 函数 体内 使 用 this 关键 字 ， 代 表 所 要 生成 的 对 象 实例 。 

回 ”生成 对 象 时 ， 必 须 用 new 运算 符 来 调用 构造 函数 。 

| 【拓展 】 

线 上 阅读 | 在 典型 的 面向 对 象 编程 语言 中 ， 类 包含 很 多 概念 和 内 涵 ， 详 细 说 明 请 扫 码 了 解 。 
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10.1.3 ”使 用 new 运算 符 


new 运算 符 的 作用 ， 就 是 执行 构造 函数 ， 返 回 一 个 实例 对 象 。 例 如 : 
VarF=fnnction0 { 
this.price = 1000; 
} 
var f= new FO: 
fprice // 1000 | 
上 面 代码 通过 new 运算 符 ， 让 构造 函数 下 生成 一 个 实例 对 象 ， 保 存在 变量 上 中 。 这 个 新 生成 的 实 | 
例 对 象 ， 从 构造 函数 F 继承 了 price 属性 。new 运算 符 执行 时 ， 构 造 函 数 内 部 的 this， 就 代表 了 新 生 | 
成 的 实例 对 象 ，this.price 表示 实例 对 象 有 一 个 price 属性 ， 值 是 1000。 | 
使 用 new 运算 符 时 ， 根 据 需 要 ， 构 造 函 数 也 可 以 接受 参数 。 例 如 : 


var F = function(p) { | 
this.price 三 P: | 
| 


上 

var f= new F(500); ! 

new 运算 符 本 身 就 可 以 执行 构造 函数 ， 所 以 后 面 的 构造 函数 可 以 带 括号 ， 也 可 以 不 带 括号 。 下 面 | 
两 行 代码 是 等 价 的 。 例 如 : 


var f= new FO; 
var f= newF: 


< 全 注意 : 如果 忘 了 使 用 new 运算 符 ， 直 接 调用 构造 函数 ， 这 时 构造 函数 就 变 成 普通 函数 ， 不 会 生 
成 实例 对 象 ，this 就 代表 全 局 对 象 ， 这 将 造成 一 些 意 想不到 的 结果 。 


具体 说 明和 示例 请 扫 码 阅读 。 
10.1.4 new 运行 原理 


使 用 new 运算 符 时 ， 它 后 面 的 函数 调用 就 不 是 正常 的 调用 ， 而 是 依次 执行 下 面 的 步骤 。 

(1) 创建 一 个 空 对 象 ， 作 为 将 要 返回 的 对 象 实例 。 

(2) 将 这 个 空 对 象 的 原型 ， 指 向 构造 函数 的 prototype 属性 。 

(3) 将 这 个 空 对 象 赋值 给 函数 内 部 的 this 关键 字 。 

(4) 开始 执行 构造 函数 内 部 的 代码 。 

也 就 是 说 ， 构 造 函数 内 部 this 指 的 是 一 个 新 生成 的 空 对 象 ， 所 有 针对 this 的 操作 都 会 发 生 在 这 个 
空 对 象 上 。 构 造 函 数 之 所 以 叫 “构造 函数 "， 就 是 说 这 个 函数 的 目的 : 操作 一 个 空 对 象 〈this 对 象 )， 
将 其 “构造 ”为 需要 的 样子 。 

如 果 构 造 函 数 内 部 有 return 语句 ， 而 且 return 后 面 跟着 一 个 对 象 ，new 运算 后 会 返回 returm 语句 
指定 的 对 象 ， 否 则 ， 就 会 不 管 retum 语句 ， 返 回 this 对 象 。 例 如 : 

var F = fonction0 { 

this.price = 1000: 
Tetum 1000: 


上 
(new FO) 一 1000: // false 


“a 
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| 在 上 面 代码 中 ， 构 造 函 数 下 的 retur 语句 返回 一 个 数值 。 这 时 ，new 运算 符 就 会 忽略 这 个 return 
| 语句， 返回 “构造 ”后 的 this 对 象 。 
但 是 ， 如 果 return 语句 返回 的 是 一 个 跟 this 无 关 的 新 对 象 ，new 运算 后 会 返回 这 个 新 对 象 ， 而 不 
| 是 this 对 象 。 这 一 点 需要 特别 引起 注意 。 例 如 : 
varF= fhnction0 { 

this.price = 1000: 
| Tetum {price: 2000}: 
| 中 

(newEO).price: /2000 

在 上 面 代码 中 ， 构 造 函 数 下 的 return 语句 ， 返 回 的 是 一 个 新 对 象 。new 运算 符 会 返回 这 个 对 象 ， 
而 不 是 this 对 象 。 


< 似 注意 : 如 果 对 普通 函数 ( 内 部 没有 this 关键 字 的 函数 ) 使 用 new 调用 ， 会 返回 一 个 空 对 象 。 


function getMessageO { 

| Tetum "this is a message’; 

| : 

| var msg = new getMessage(): 
msg; 10 
typeof msg // "object" 


在 上 面 代 码 中 ，getMessage 是 一 个 普通 函数 ,返回 一 个 字符 串 。 对 它 使 用 new 运算 符 调用 ,会 得 
到 一 个 空 对 象 。 这 是 因为 new 运算 符 总 是 返回 一 个 对 象 ， 要 么 是 实例 对 象 ， 要 么 是 retum 语句 指定 的 
| 对 象 。 由 于 retum 语句 返回 的 是 字符 串 ， 所 以 new 运算 符 就 忽略 了 该 语句 。 
| 【拓展 】 
| new 运算 符 简化 的 内 部 流程 ， 可 以 用 下 面 的 代码 表示 。 
finction_new(/* 构造 函数 */ constructor /+ 构造 函数 参数 */ paraml) { 
var args = [].slice.call(arguments): // 将 arguments 对 象 转 为 数组 
Var constructor = args.shift(): / 取出 构造 函数 
| I 创建 一 个 空 对 象 继承 构造 函数 的 prototype 属性 
| Var context = Object.create(constructor.prototype): 
| Var result = constructor.apply(context, args);”// 执行 构造 函数 
// 如 果 返 回 结果 是 对 象 ， 就 直接 返回 ， 否 则 返回 context 对 象 
Tetum (typeof result 一 'object && result != null) ? result: context: 


) 
var actor 二 _new(Person, ' 张 三" 28); / 实例 


10 1.5 使 用 new.target 


在 函数 内 部 可 以 使 用 new.target 属 性 .如 果 当 前 函数 是 new 运算 符 调用 ,new.target 指 向 当前 函数 ， 
5 则 为 undefined。 例 如 : 


function fO { 
console.log(new.target 一 一 月 : 


贡 


| fi // false 
| new fo) /ltme 


“a” 
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使 用 这 个 属性 ， 可 以 判断 函数 调用 时 ， 是 否 使 用 new 运算 符 。 例 如 : 
function fO { 
if (Inew.target) { 
throw new Error(' 请 使 用 new 命令 调用 ! ，): 


! 
f0 /Uncaught Error: 请 使 用 new 命令 调用 
在 上 面 代码 中 ， 构 造 函 数 f 调 用 时 ， 没 有 使 用 new 运算 符 ， 就 抛 出 一 个 错误 。 


10.2 使 用 this 


在 学 习 JavaScript 面向 对 象 编程 之 前 ， 读 者 应 该 先 透彻 理解 this 关键 字 ， 掌 握 其 灵活 用 法 。 在 前 | 

面 章节 中 也 曾经 简单 介绍 过 this， 本 节 将 系统 讲解 this 的 技术 细节 。 | 
和 ,| | 

10.2.1 this 调用 对 象 

this 总 是 返回 一 个 调用 对 象 ， 简 单 说 ， 就 是 返回 属性 或 方法 “当前 ”所 在 的 对 象 。 例 如 : 

this.property 

在 上 面 代码 中 ，this 就 代表 property 属性 当前 所 在 的 对 象 。 限 于 篇 幅 ， 更 详细 的 说 明和 演示 示例 | 
请 扫 码 阅读 。 
10.2.2 this 应 用 场景 


this 的 使 用 可 以 分 成 以 下 几 个 场合 : 全 局 环境 、 构 造 函 数 、 对 象 的 方法 。 限 于 篇 幅 ， 更 详细 的 说 
明和 演示 示例 请 扫 码 阅读 。 


10.2.3 ”注意 事项 | 


由 于 this 指 代 对 象 不 固定 ， 用 法 灵活 ， 使 用 时 应 该 注意 3 个 问题 : 避免 多 层 this、 避 免 在 数组 处 
理 方法 中 使 用 this、 避 免 在 回调 函数 中 使 用 this。 限 于 篇 幅 ， 更 详细 的 说 明和 演示 示例 请 扫 码 阅读 。 


10.2.4 绑 定 this 


this 的 动态 切换 , 固然 为 JavaScript 创造 了 巨大 的 灵活 性 , 但 也 使 得 编程 变 得 困难 和 模糊 。 有 时 ， 
需要 把 this 固定 下 来 ， 避 免 出 现 意 想不到 的 情况 。JavaScript 提供 了 call0、apply0、bindO 这 3 个 方 
法 ， 来 切换 /固定 this 的 指向 。 

限于 篇 幅 ， 更 详细 的 说 明和 演示 示例 请 扫 码 阅读 。 


10.3 使 用 prototype 


| 
| 
| 
| 
人 


大 部 分 面向 对 象 的 编程 语言 ， 都 以 “类 ”(Class) 为 基础 ， 实 现 对 象 的 继承 。JavaScript 语言 不 


a 
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| 是 如 此 ， 它 是 以 “原型 对 象 ”(Prototype) 为 基础 实现 对 象 的 继承 。 

| 10.3.1 定义 原型 

JavaScript 通过 构造 函数 生成 新 对 象 ， 因 此 构造 函数 可 以 视 为 对 象 的 模板 。 实 例 对 象 的 属性 和 方 
法 ， 可 以 定义 在 构造 函数 内 部 。 

function Cat(name. color) { 


| this.name = name: 
| this.color = color: 


} 
| Var catl = new Cat(' 大 毛 ', ' 白 色 '); 
| catl.name /WW' 大 毛 ' 
| catlcolor /白色 


| 在 上 面 代码 中 ，Cat 函数 是 一 个 构造 函数 ， 函 数 内 部 定义 了 name 属性 和 color 属性 ， 所 有 实例 对 
| 象 (上 例 是 eatl ) 都 会 生成 这 两 个 属性 ， 即 这 两 个 属性 会 定义 在 实例 对 象 上 面 。 

通过 构造 函数 为 实例 对 象 定义 属性 ， 虽 然 很 方便 ， 但 是 有 一 个 缺点 。 同 一 个 构造 函数 的 多 个 实例 
之 间 ， 无 法 共享 属性 ， 从 而 造成 对 系统 资源 的 浪费 。 

function Cat(name, color) { 
this.name = name; 

| this.color = color; 
| this.meow = function| { 
| console.log( 噶 噶 ); 


上 

| 人 catl = new Cat( 大 毛 ', "白色 '); 
| Var cat2 = new Cat(' 二 毛 ' 黑色 ): 
| catl.meow 一 一 cat2.meow // false 

在 上 面 代码 中 ，catl 和 cat2 是 同一 个 构造 函数 的 两 个 实例 ， 它 们 都 具有 meow 方法 。 由 于 meow 
方法 是 生成 在 每 个 实例 对 象 上 面 ， 所 以 两 个 实例 就 生成 了 两 次 。 也 就 是 说 ， 每 新 建 一 个 实例 ， 就 会 新 
建 一 个 meow 方法 。 这 既 没有 必要 ， 又 浪费 系统 资源 ， 因 为 所 有 meow 方法 都 是 同样 的 行为 ， 完 全 应 
该 共享 。 

这 个 问题 的 解决 方法 ， 就 是 JavaScript 的 原型 对 象 〔Prototype)。 

JavaScript 的 每 个 对 象 都 继承 另 一 个 对 象 ， 后 者 称 为 “原型 ”(Prototype) 对 象 。 一 方面 ， 任 何 一 
个 对 象 ， 都 可 以 充当 其 他 对 象 的 原型 ， 另 一 方面 ， 由 于 原型 对 象 也 是 对 象 ， 所 以 它 也 有 自己 的 原型 。 
null 也 可 以 充当 原型 ， 区 别 在 于 它 没有 自己 的 原型 对 象 。 

JavaScript 继承 机 制 的 设计 就 是 ， 原 型 的 所 有 属性 和 方法 ， 都 能 被 子 对 象 共享 。 
| 【示例 】 下 面 代码 演 示 如 何 为 对 象 指定 原型 。 每 一 个 构造 函数 都 有 一 个 prototype 属性 ， 这 个 属 
| 性 会 在 生成 实例 时 ， 成 为 实例 对 象 的 原型 对 象 。 
| function Animal(name) { 
| this.name = name: 


; 

Animal.prototype.color = "white’; 
| var catl = new Animal( 大 毛 ): 

| var cat2 = new Animal(' 二 毛 '): 


“有 
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catl.color /white’ | 

cat2.color /white' | 

| 

在 上 面 代 码 中 ， 构 造 函 数 Animal 的 prototype 对 象 ， 就 是 实例 对 象 catl 和 cat2 的 原型 对 象 。 在 | 
原型 对 象 上 添加 一 个 color 属性 ， 结 果 ， 实 例 对 象 都 继承 了 该 属性 。 | 人 Ff 


原型 对 象 的 属性 不 是 实例 对 象 自身 的 属性 。 只 要 修改 原型 对 象 , 变动 就 立刻 会 体现 在 所 有 实例 对 | 
gE. Exote 

Animal.prototype.color = 'yellow’; 

catl.color JW "yellow" 

cat2.color /i "yellow" 

在 上 面 代码 中 ， 原 型 对 象 的 color 属性 的 值 变 为 yellow， 两 个 实例 对 象 的 color 属性 立刻 跟着 变 。 
这 是 因为 实例 对 象 其 实 没 有 color 属性 ， 都 是 读 取 原 型 对 象 的 color 属性 。 也 就 是 说 ， 当 实例 对 象 本 身 
没有 某 个 属性 或 方法 时 ， 它 会 到 构造 函数 的 prototype 属性 指向 的 对 象 ， 去 寻找 该 属性 或 方法 。 这 就 | 
是 原型 对 象 的 特殊 之 处 。 | 


| 

如 果实 例 对 象 自身 就 有 某 个 属性 或 方法 ， 它 就 不 会 再 去 原型 对 象 寻找 这 个 属性 或 方法 。 | 
catl.color = ‘black’; | 
catl.color JW black | 
cat2.color yellow' | 
Animal.prototype.color /Yellow | 

在 上 面 代码 中 , 实例 对 象 catl 的 color 属性 改 为 black, 就 使 得 它 不 再 去 原型 对 象 读 取 color 属性 ， | 

后 者 的 值 依然 为 yellow。 | 


总 之 , 原型 对 象 的 作用 就 是 定义 所 有 实例 对 象 共享 的 属性 和 方法 。 这 也 是 它 被 称 为 原型 对 象 的 原 
因 ， 而 实例 对 象 可 以 视 作 从 原型 对 象 衍生 出 来 的 子 对 象 。 例 如 : 
Animalprototype.walk = function() { 
console.log(this.name +'is walking’); 


上 
在 上 面 代码 中 ，Animal.prototype 对 象 上 面 定义 了 一 个 walk 方法 , 这 个 方法 将 可 以 在 所 有 Animal 
实例 对 象 上 面 调用 。 

构造 函数 就 是 普通 的 函数 ， 所 以 实际 上 所 有 函数 都 有 prototype 属性 。 

【拓展 】 

原型 实际 上 就 是 一 个 普通 对 象 ， 继 承 于 Object 类 ， 由 JavaScript 自动 创建 并 依附 于 
每 个 构造 函数 ， 原 型 在 JavaScript 对 象 系统 中 的 位 置 和 关系 请 扫 码 阅读 。 


10.3.2 原型 属性 和 本 地 属性 
【示例 1】 在 下 面 示例 中 ， 演 示 如 何 定义 一 个 构造 函数 ， 并 为 实例 对 象 定义 本 地 属性 。 


fhnction f0 { // 声明 一 个 构造 类 型 | 
thisa=1: // 为 构造 类 型 声明 一 个 本 地 属性 | 
thisb = fonctionO { / 为 构造 类 型 声明 一 个 本 地 方法 
Tetum this.a: 
$B 


var e =new fO: / 实例 化 构造 类 型 


= 


“as 
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3): // 调用 实例 对 象 的 属性 a， 返回 1 
alert(e.bO): // 调用 实例 对 象 的 方法 b0， 提 示 1 

构造 函数 人 中 定义 了 两 个 本 地 属性 ， 分 别 是 属性 a 和 方法 b0。 当 构造 函数 实例 化 后 ， 实 例 对 象 
| 继承 了 构造 函数 的 本 地 属性 。 此 时 可 以 在 本 地 修改 实例 对 象 的 属性 a 和 方法 b0。 


| ©a=2; 


如 果 给 构造 函数 定义 了 与 原型 属性 同名 的 本 地 属性 ， 则 本 地 属性 会 覆盖 原型 属性 值 。 

如 果 使 用 delete 运算 符 删除 本 地 属性 ， 则 原型 属性 会 被 访问 。 在 上 面 示例 基础 上 删除 本 地 属性 ， 
则 会 发 现 可 以 访问 原型 属性 。 

【示例 2】 本 地 属性 可 以 在 实例 对 象 中 被 修改 ， 但 是 不 同 实例 对 象 之 间 不 会 相互 干扰 。 


| this.a= 1; / 为 构造 类 型 声明 一 个 本 地 属性 

| 

| 

| Var e =new fO: / 实例 e 

| varg =new fl): / 实例 g 

| alert(e.a): / 返回 值 为 1， 说 明 它 继承 了 构造 函数 的 初始 值 

| alert(g.a); / 返回 值 为 1， 说 明 它 继承 了 构造 函数 的 初始 值 
[下 / 修改 实例 e 的 属性 a 的 值 

| alert(e.a): / 返回 值 为 2， 说 明 实 例 e 的 属性 a 的 值 改变 了 

| alert(g.a); / 返回 值 为 1， 说 明 实 例 g 的 属性 a 的 值 没 有 受 影响 


上 面 示例 演示 了 ， 如 果 使 用 本 地 属性 ， 则 实例 对 象 之 间 就 不 会 相互 影响 。 但 是 如 果 和 希望 统一 修改 
| 实例 对 象 中 包含 的 本 地 属性 值 ， 就 需要 一 个 个 修改 ， 工 作 量 会 很 大 。 
下 面 还 有 两 个 演示 示例 ， 限 于 篇 幅 我 们 把 它 放 在 网 上 ， 读 者 可 以 扫 码 阅读 。 


”10.3.3 ”应 用 原型 


下 面 通过 几 个 实例 介绍 原型 在 代码 中 的 应 用 技巧 。 
| 【示例 1】 利 用 原型 为 对 象 设置 默认 值 。 当 原型 属性 与 本 地 属性 同名 时 ， 它 们 之 间 可 以 出 现 交 流 


| 现象 。 利 用 这 种 现象 为 对 象 初始 化 默认 值 。 


| function p(x) { // 构造 函数 
| ix) / 如 果 参 数 存在 ， 则 使 用 该 参数 设置 属性 ， 该 条 件 是 关键 
| thisx=x: / 使 用 参数 初始 化 本 地 属性 x 的 值 
| } 
| p.prototype.x = 0; / 利用 原型 属性 ， 设 置 本 地 属性 x 的 默认 值 
| varpl =new pO: / 实例 化 一 个 没有 带 参数 的 对 象 
alert(p1.x): / 返回 0， 即 显示 本 地 属性 的 默认 值 
varp2 = new p(1); / 再 次 实例 化 ， 传 递 一 个 新 的 参数 


| 
| alert(p2.x): // 返回 1， 即 显示 本 地 属性 的 初始 化 值 
| 
| 


| 【示例 2】 利用 原型 间接 实现 本 地 数据 备份 。 把 本 地 对 象 的 数据 完全 赋值 给 原型 对 象 ， 相 当 于 为 
， 该 对 象 定义 一 个 副本 ， 通 俗 地 说 就 是 备份 对 象 。 这 样 当 对 象 属性 被 修改 时 ， 可 以 通过 原型 对 象 来 恢复 
”本 地 对 象 的 初始 值 。 
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function p(x) { // 构造 函数 | 
this.x=x; | 

} | 

Pp.prototype.backup = fonction0 { | , 

// 原型 方法 ， 备 份 本 地 对 象 的 数据 到 原型 对 象 中 | 全 | 
for(var i in this) { | 一 一 
pprototype[i] = this[i]: | Note 

} | 

var pl =new p(1): / 实例 化 对 象 

P1l.backupO: / 备份 实例 对 象 中 的 数据 | 

pl.x=10; / 改写 本 地 对 象 的 属性 值 | 

alert(pl X) / 返回 10， 说 明 属性 值 已 经 被 改写 | 

pl =p.prototype: // 恢复 备份 | 

alert(pl.x) // 返回 1， 说 明 对 象 的 属性 值 已 经 被 恢复 到 原始 值 


【示例 31 利用 原型 还 可 以 为 对 象 属性 设置 “只 读 ” 特性， 这 在 一 定 程度 上 可 以 避免 对 象 内 部 数 | 
据 被 任意 修改 的 乾 众 。 | 

下 面 示例 演示 了 如 何 根据 平面 上 两 点 坐标 来 计算 它们 之 间 的 距离 。 构造 函数 p 用 来 设置 定位 点 坐 | 
标 ， 当 传递 两 个 参数 值 时 ， 会 返回 以 参数 为 坐标 值 的 点 ， 如 果 省 略 参数 则 默认 点 为 原点 〈0.0)。 而 在 
构造 函数 1 中 通过 传递 的 两 点 坐标 对 象 ， 计 算 它们 的 距离 。 


function p(x,y) { // 求 坐标 点 构造 函数 
这 x) this.x = x: // 初始 x 轴 值 
这 y) thisy = y; // 初始 y 轴 值 | 
了 P:prototypex= 0; // 默认 x 轴 值 | 
Pp.prototype.y = 0: // 默认 y 轴 值 | 
) 
fnnction 1(a,b) { // 求 两 点 距离 构造 函数 | 
Var a=a; / 参数 私有 化 | 
varb=b: // 参数 私有 化 | 
varw=function0 { // 计算 x 轴 距离 ， 返 回 对 函数 引用 | 
Tetum Math.abs(a.x — b.x); | 
) | 
varh=fanction0 { // 计算 y 轴 距离 ， 返 回 对 函数 引用 | 
Teturm Math.abs(a.y — b.y): | 
} | 
this.length = function| { // 计算 两 点 距离 ， 使 用 小 括号 调用 私有 方法 wO 和 0 | 
Tetum Math.sqrt(wO*wO + hO*hO): | 
) 
thisb = fanctionO { // 获取 起 点 坐标 对 象 | 
Tetum a: | 
| 
thise= function| { // 获取 终点 坐标 对 象 | 
retum b: | 
} | 
) | 
var pl =newp(1.2): / 实例 化 p 构造 函数 ， 声 明 一 个 点 | 
varp2 =newp(10.20): // 实例 化 p 构造 函数 ， 声 明 另 一 个 点 | 
varll =new 1(p1.p2): / 实例 化 1 构造 函数 ， 传 递 两 点 对 象 | 
alert(lllengthO) // 返回 20.12461179749811， 调 用 lengthO 计 算 两 点 距离 | 
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// 不 经 意 改动 方法 b0 的 一 个 属性 为 50 
/ 返回 43.86342439892262， 说 明 影响 两 点 距离 值 


在 测试 中 会 发 现 ， 如 果 无 意 间 修改 了 构造 函数 1 的 方法 b0 或 e0 的 值 ， 则 构造 函数 1 中 的 lengthO 


| 方法 的 计算 值 也 随 之 发 生变 化 。 这 种 动态 效果 对 于 需要 动态 跟踪 两 点 坐标 变化 来 说 非常 必要 。 但 是 ， 
“| 这 里 并 不 需要 当初 始 化 实例 之 后 ， 随 意 地 被 改动 坐标 值 。 毕 竟 方 法 bD0 和 e() 与 参数 a 和 b 没有 多 大 


本 和 


| 为 了 避免 因为 改动 方法 b0 的 属性 x 值 会 影响 两 点 距离 ， 可 以 在 方法 bD 和 e0 中 ， 新 建 一 个 临时 
| 性 的 构造 类 ， 设 置 该 类 的 原型 为 a， 然 后 实例 化 构造 类 并 返回 ， 这 样 就 阻 断 了 方法 b0 与 私有 变量 a 
| 的 直接 联系 ， 它 们 之 间 仅 就 是 值 的 传递 ， 而 不 是 对 对 象 a 的 引用 ， 从 而 避免 因为 方法 b0 的 属性 值 变 


| 化 ， 而 影响 私有 对 象 a 的 属性 值 。 


1/ 方法 b0 

// 临时 构造 类 

// 把 私有 对 象 传递 给 临时 构造 类 的 原型 对 象 

// 返回 实例 化 对 象 ， 阻 断 直接 返回 a 的 引用 关系 


// 方法 们 

// 临时 构造 类 

/ 把 私有 对 象 传递 给 临时 构造 类 的 原型 对 象 

// 返回 实例 化 对 象 ， 阻 断 直接 返回 a 的 引用 关系 


还 有 一 种 方法 , 这 种 方法 是 在 给 私有 变量 w 和 bh 赋值 时 , 不 是 赋值 函数 , 而 是 函数 调用 表达 式 ， 


| 这样 私有 变量 w 和 h 存储 的 是 值 类 型 数据 ， 而 不 是 对 函数 结构 的 引用 ， 从 而 就 不 再 受 后 期 相关 属性 


， 值 的 影响 。 


| function l(a.b) { 
| Var a=a; 
| var b=b:; 

Var W= functionO { 

Tetum Math.abs(a.x — b.x); 

| }0 
| var h = functionO { 
| Tetur Math.abs(a.y — b.y): 
70 
this.length = fanctionO { 


b 
thisb = fanctionO { 
Tetum a: 

} 
this.e = function| { 
| Tetum b: 
| } 
| 

【示例 4】 利 用 原型 进行 批量 复制 。 


| function fx) { 
J this.x = X: 


Teturn Math.sqrt(wO*wO + hOshO): 


// 求 两 点 距离 构造 函数 

/ 参数 私有 化 

// 参数 私有 化 

/ 计算 x 轴 距离 ， 返 回 函数 表达 式 的 计算 值 


/ 计算 y 轴 距离 ， 返 回 函数 表达 式 的 计算 值 


/ 计算 两 点 距离 ， 直 接 使 用 私有 变量 w 生来 计算 


/ 获取 起 点 坐标 对 象 


/ 获取 终点 坐标 对 象 


// 构造 函数 
/ 声明 本 地 属性 
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} | 
vara=[]: // 声明 数组 | 
for(vari= 0:1<100: +) { // 使 用 for 循环 结构 批量 复制 构造 类 f 的 同一 个 实例 | 

al] =new f10): // 把 实例 分 别 存 入 数组 | 
} 


上 面 的 代码 演示 了 如 何 复制 100 次 同一 个 实例 对 象 。 这 种 做 法 本 无 可 非议 , 但 是 如 果 在 后 期 修改 ， 
数组 中 每 个 实例 对 象 时 ， 就 会 非常 麻烦 。 现 在 可 以 尝试 使 用 原型 来 进行 批量 复制 操作 。 


fnnction fx) { // 构造 函数 

thisx=x; / 声明 本 地 属性 | 
| 
vara=[]: 1/ 声明 数组 | 
function temp0O {} // 定义 一 个 临时 的 空 构造 类 temp | 
temp.prototype = new f(10); // 把 构造 类 下 实例 化 ， 并 传递 给 构造 类 temp 的 原型 对 象 
for(vari= 0:;i<100:i++) { // 使 用 for 循环 批量 复制 临时 构造 类 temp 的 同一 个 实例 

ali] = new tempO; / 把 实例 分 别 存 入 数组 


) 

| 

把 构造 类 f 的 实例 存储 在 临时 构造 类 的 原型 对 象 中 ， 然 后 通过 临时 构造 类 temp 实例 来 传递 复制 | 
的 值 。 这 样 ， 要 想 修改 数组 的 值 ， 只 需要 修改 类 了 的 原型 即 可 ， 从 而 避免 逐一 修改 数组 中 每 个 元 素 。 | 


10.3.4 ”原型 链 


对 象 的 属性 和 方法 , 有 可 能 定义 在 自身 , 也 有 可 能 定义 在 它 的 原型 对 象 。 由 于 原型 本 身 也 是 对 象 ， | 
又 有 自己 的 原型 ， 所 以 形成 了 一 条 原型 链 (Prototype Chain)。 例 如 ，a 对 象 是 b 对 象 的 原型 ，b 对 象 | 视频 讲解 
是 对 象 的 原型 ， 以 此 类 推 。 

如 果 一 层 层 地 上 滴 ， 所 有 对 象 的 原型 最 终 都 可 以 上 漳 到 Objectprototype， 即 Object 构造 函数 的 
prototype 属性 。 那 么 ，Object.prototype 对 象 有 没有 它 的 原型 呢 ? 回答 是 有 的 ， 就 是 没有 任何 属性 和 方 
法 的 null 对 象 ， 而 null 对 象 没有 自己 的 原型 。 

Object.getPrototypeOftObject prototype) /null 

上 面 代码 表示 ，Object.prototype 对 象 的 原型 是 null， 由 于 null 没有 任何 属性 ， 所 以 原型 链 到 此 
为 止 。 

“原型 链 ” 的 作用 是 ， 读 取 对 象 的 某 个 属性 时 ，JavaScript 引擎 先 寻 找 对 象 本 身 的 属性 ， 如 果 找 
不 到 , 就 到 它 的 原型 去 找 , 如 果 还 是 找 不 到 , 就 到 原型 的 原型 去 找 。 如 果 直到 最 顶层 的 Object.prototype 
还 是 找 不 到 ， 则 返回 undefined。 

如 果 对 象 自身 和 它 的 原型 ， 都 定义 了 一 个 同名 属性 ， 那 么 优先 读 取 对 象 自身 的 属性 ， 这 叫 作 “ 覆 
盖 ”(Overriding )。 


< 轴 注意 : 一 级 级 向 上 ， 在 原型 链 寻 找 某 个 属性 ， 对 性 能 是 有 影响 的 。 所 寻找 的 属性 在 越 上 层 的 原型 
对 象 ， 对 性 能 的 影响 越 大 。 如 果 寻 找 某 个 不 存在 的 属性 ， 将 会 遍历 整个 原型 链 。 
【示例 1】 如 果 让 某 个 函数 的 prototype 属性 指向 一 个 数组 , 就 意味 着 该 函数 可 以 当 作 数组 的 构造 
函数 ， 因 为 它 生成 的 实例 对 象 都 可 以 通过 prototype 属性 调用 数组 方法 。 
Var MyArray = function0 他: 
MyArrayprototype= new Array(): 
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MyArray.prototype.constructor = MyArray: 
var mine = new MyArrayO:; 


| 
| mine.push(1, 2, 3); 
minelength /3 
全 站 | mine instanceof Array /ltrmue 


NM | 在 上 面 代码 中 , mine 是 构造 函数 MyArray 的 实例 对 象 , 由 于 MyArray 的 prototype 属性 指向 一 个 
| 数组 实例 ， 使 得 mine 可 以 调用 数组 方法 (这 些 方法 定义 在 数组 实例 的 prototype 对 象 上 面 )。 至 于 最 
后 那 行 instanceof 表达 式 ,我 们 知道 instanceof 运算 符 用 来 比较 一 个 对 象 是 否 为 某 个 构造 函数 的 实例 ， 
最 后 一 行 就 表示 mine 为 Array 的 实例 。 

肉 提示 : 下 面 的 代码 可 以 找 出 ， 菜 个 属性 到 底 是 原型 链 上 哪个 对 象 自身 的 属性 。 


function getDefiningObject(obj, propKey) { 

while (obj && !{}.hasOwnProperty.call(obj. propKey)) { 

obj = Object.getPrototypeOf(ob)); 

} 

Tetum obj: 
} 

【拓展 】 

prototype 对 象 有 一 个 constructor 属性 ， 默 认 指向 prototype 对 象 所 在 的 构造 函数 。 具 体 说 明和 示 
| 例 请 扫 码 阅读 。 


| 10.3.5 ”原型 继承 


| 原型 继承 是 一 种 简化 的 继承 机 制 ， 也 是 JavaScript 主要 支持 的 一 种 继承 方式 。 在 原型 继承 中 ， 类 
| 和 实例 概念 被 淡化 了 ， 一 切 都 从 对 象 的 角度 来 考虑 。 原 型 继承 不 再 需要 使 用 类 来 定义 对 象 的 结构 ， 直 
| 接 定义 对 象 ， 并 被 其 他 对 象 引用 ， 这 样 就 形成 了 一 种 继承 关系 ， 其 中 引用 对 象 被 称 为 原型 对 象 
(Prototype Object)。JavaScript 能 够 根据 原型 链 来 查找 对 象 之 间 的 这 种 继承 关系 。 

【示例 】 下 面 使 用 原型 继承 的 方法 设计 类 型 继承 。 


function A(x) { /A 类 
this.xl=x; /A 的 本 地 属性 xl 

| this.getl = functionO { /A 的 本 地 方法 get10 
| Tetum this.xl: 
| } 
| } 
| function B(x) { /1/B 类 
| this.x2 = X: /1B 的 本 地 属性 x2 
| this.get2 = function() { /B 的 本 地 方法 get20 
| Tetum this.x2 + this.x2 
| 上 
| Bprototype=new A(); // 原型 对 象 继承 A 的 实例 
| function C(x) { NC 类 
| this.x3 =x: /1C 的 本 地 属性 x3 
| this.get3 = fonctionO { /1C 的 本 地 方法 get30 


Tetum this.x2 * this.x2:; 
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Cprototype = new B(2): // 原型 对 象 继承 B 的 实例 

在 上 面 示例 中 ， 分 别 定义 了 3 个 函数 ， 然 后 通过 原型 继承 方法 把 它们 串 连 在 一 起 ， 这 样 C 能 够 | 
继承 B 和 A 函数 的 成 员 , 而 B 能 够 继承 A 的 成 员 。prototype 的 最 大 特点 就 是 能 够 允许 对 象 实例 共享 | 
原型 对 象 的 成 员 。 因此 如 果 把 某 个 对 象 作为 一 个 类 型 的 原型 ， 那么 说 这 个 类 型 的 实例 以 这 个 对 象 为 原 
型 。 这 个 时 候 ， 实 际 上 这 个 对 象 的 类 型 也 可 以 作为 那些 以 这 个 对 象 为 原型 的 实例 的 类 型 。 此 时 ， 可 以 | 
在 C 的 实例 中 调用 B 和 A 的 成 员 。 | 


var b =new B(2); / 实例 化 B | 
var c=new C(3); // 实例 化 C | 
alert(b.x1); // 在 实例 对 象 b 中 调用 A 的 属性 x1， 返 回 1 | 
alert(c.x1): // 在 实例 对 象 中 调用 A 的 属性 x1， 返 回 1 

alert(c.get30): // 在 实例 对 象 c 中 调用 C 的 方法 get30， 返 回 9 

alert(c.get20): // 在 实例 对 象 c 中 调用 B 的 方法 get20， 返 回 4 


基于 原型 的 编程 是 面向 对 象 编程 的 一 种 特定 形式 。 在 这 种 编程 模型 中 ,不 需要 声明 静态 类 ， 而 是 
通过 复制 已 经 存在 的 原型 对 象 来 实现 继承 关系 的 。 因 此 ， 基 于 原型 的 模型 没有 类 的 概念 ， 原 型 继承 中 
的 类 仅 是 一 种 模拟 ， 或 者 说 是 沿用 面向 对 象 编程 的 概念 。 

原型 继承 显得 非常 简单 ， 其 优点 也 是 结构 简练 ， 不 需要 每 次 构造 都 调用 父 类 的 构造 函数 ， 且 不 需 
要 通过 复制 属性 的 方式 就 能 快速 实现 继承 。 但 是 它 也 存在 以 下 几 个 缺点 。 

每 个 类 型 只 有 一 个 原型 ， 所 以 它 不 直接 支持 多 重 继承 。 

它 不 能 很 好 地 支持 多 参数 或 者 动态 参数 的 父 类 。 也 许 在 原型 继承 阶段 ， 用 户 还 不 能 决定 以 | 

什么 参数 来 实例 化 构造 函数 。 | 

使 用 不 够 灵活 。 用 户 需 要 在 原型 声明 阶段 实例 化 父 类 对 象 ， 并 把 它 作为 当前 类 型 的 原型 ， 

这 限制 了 父 类 实例 化 的 灵活 性 ， 很 多 时 候 无 法 确定 父 类 对 象 实例 化 的 时 机 和 场所 。 
prototype 属性 固有 的 副作用 。 用 户 可 以 参阅 前 面 小 节 内 容 的 讲解 。 

【拓展 】 | 

instanceof 运算 符 返回 一 个 布尔 值 ， 表 示 某 个 对 象 是 否 为 指定 的 构造 函数 的 实例 。 利 用 instanceof | 
运算 符 ， 还 可 以 巧妙 地 解决 ， 调 用 构造 函数 时 ， 忘 了 加 new 运算 符 的 问题 。 详 细 说 明 请 扫 码 阅读 。 


10.3.6 扩展 原型 方法 


JavaScript 允许 为 基本 数据 类 型 定义 方法 。 通 过 为 Objectprototype 添加 原型 方法 ， 该 方法 可 被 所 | 
有 的 对 象 可 用 。 这 样 的 方式 对 函数 、 数 组 、 字 符 串 、 数 字 、 正 则 表达 式 和 布尔 值 都 适用 。 例 如 ， 通 过 | 
给 Function.prototype 增加 方法 ， 使 该 方法 对 所 有 函数 可 用 。 
Function.prototype.method = function(name. func) { 
this.prototype[name] = func: 
Tetum this: 


a 
为 Function.prototype 增加 一 个 method 方法 后 ， 就 不 必 使 用 prototype 这 个 属性 ， 然 后 调用 
method() 方 法 直接 为 各 种 基本 类 型 添加 方法 。 

JavaScript 并 没有 单独 的 整数 类 型 ， 因 此 有 时 候 只 提取 数字 中 的 整数 部 分 是 必要 的 。JavaScript 本 
身 提供 的 取 整 方法 有 些 丑陋 。 下 面 通过 为 Number prototype 添加 一 个 integer0 方 法 来 改善 它 。 


“285。 


ee 网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版) 


| CO 
| EE 
不 育 
Nambermethod(integer' function0 { 
| Tetum Math[this < 0 ? 'ceil': ‘floor’](this): 
| »; 
会 内 | document writeln((-1013)integerO): 1-3 
| Number.method0 方 法 能 够 根据 数字 的 正 负 来 判断 是 使 用 Math.ceiling 还 是 Math.floors， 这 样 就 避 
免 了 每 次 都 编写 上 面 的 代码 。 
string methodCtrimy, function0 { 
| Tetum thisreplace(/^M\s+ s+$/g, "): 


六 : 

| document writeln(" +" abc ".trimO +""):;  //'abe" 
| trim0 方 法 使 用 了 一 个 正则 表达 式 ， 把 字符 串 中 的 左右 两 侧 的 空格 符 清除 掉 。 
| 通过 为 基本 类 型 扩展 方法 ， 可 以 大 大 提高 语言 的 表现 力 。 由 于 JavaScript 原型 继承 的 本 质 ， 所 有 
原型 方法 立刻 被 赋予 到 所 有 的 实例 ， 即 使 该 实例 在 原型 方法 被 创建 之 前 就 创建 好 。 

基本 类 型 的 原型 是 公共 结构 ， 所 以 在 扩展 基 类 时 务必 小 心 ， 避 免 玫 盖 掉 基 类 的 原生 方法 。 一 个 保 
险 的 做 法 就 是 在 确定 没有 该 方法 时 才 添 加 它 。 

Function.prototype.method = function(name, func) { 

这 !this.prototype[name]) { 

this.prototype[name] = func: 
Teturm this; 


| 

| D 
| } 

| 另外 ，for-in 语句 用 在 原型 上 时 表现 很 粮 糕 。 可 以 使 用 hasOwnProperty 方法 筛选 出 继承 而 来 的 属 
| 性 ， 或 者 查找 特定 的 类 型 。 


拒 ; 10.3.7 Object.getPrototypeOf() 


| Object,getPrototypeOfO 方 法 返回 一 个 对 象 的 原型 ， 这 是 获取 原型 对 象 的 标准 方法 。 具 体 示 例 请 扫 
| 码 阅读 。 


10.3.8 ObjectsetPrototypeOf() 


ObjectsetPrototypeOf 方 法 可 以 为 现 有 对 象 设置 原型 ， 返 回 一 个 新 对 象 。 详 细 说 明和 示例 请 扫 码 
| 阅读 。 
| 10.3.9 Object.create() 


JavaScript 提供 了 Objectcreate() 方 法 ， 使 用 它 可 以 从 一 个 实例 对 象 ， 生 成 另 一 个 实例 对 象 。 详 细 
| 说 明和 示例 请 扫 码 阅读 。 


4 10.3.10 Object.prototype.isPrototypeOf() 


| 对 象 实例 的 isPrototypeOf0 方 法 ， 用 来 判断 一 个 对 象 是 否 是 另 一 个 对 象 的 原型 。 详 细 说 明和 示例 
| 请 扫 码 阅读 。 


“286” 


第 10 章 面向 对 象 编程 CR T 
| 


10.3.11 Object.prototype. proto __ 

_ proto “属性 (前 后 各 两 个 下 画 线 ) 可 以 改写 某 个 对 象 的 原型 对 象 . 详 细 说 明和 示例 请 扫 码 阅读 。 
10.3.12 ”获取 原型 对 象 方法 的 比较 

获取 实例 对 象 obj 的 原型 对 象 ， 有 3 种 方法 。 

obj， proto 

obj.constructorprototype 

ObjectgetPrototypeOfobj) 

推荐 使 用 第 三 种 Object.getPrototypeOf0 方 法 ， 获 取 原 型 对 象 。 详 细 说 明和 示例 请 扫 码 阅读 。 


10.4 继 承 


通过 原型 链 ， 对 象 的 属性 分 成 两 种 : 自身 的 属性 和 继承 的 属性 。JavaScript 语言 在 Object 对 象 上 
面 ， 提 供 了 很 多 相关 方法 ， 来 处 理 这 两 种 不 同 的 属性 。 


10.4.1 Object.getOwnPropertyNames() 
Object.getOwnPropertyNames0 方 法 返回 一 个 数组 , 成 员 是 对 象 本 身 的 所 有 属性 的 键 名 , 不 包含 继 
承 的 属性 键 名 。 例 如 : 


Obiject.getOwnPropertyNames(Date) 
/1/ ["parse", "arguments", "UTC", "caller”, mamen "prototype”, "now", "length"] 
在 上 面 代码 中 ，Object.getOwnPropertyNames( 方 法 返回 Date 所 有 自身 的 属性 名 。 | 
对 象 本 身 的 属性 中 ， 有 的 是 可 以 枚 举 的 (enumerable )， 有 的 是 不 可 以 枚 举 的 ，Object.getOwn | 
PropertyNames 方法 返回 所 有 键 名 。 只 获取 那些 可 以 枚 举 的 属性 ， 使 用 Object.keys 方法 。 例 如 : 


Object keys(Date) 省 


10.4.2 Object.prototype.hasOwnProperty() 
对 象 实例 的 hasOwnProperty0 方 法 返回 一 个 布尔 值 ， 用 于 判断 某 个 属性 定义 在 对 象 自身 ， 还 是 定 
义 在 原型 链 上 。 


Date.hasOwnProperty('length’) /ltrmue 
Date.hasOwnProperty(toString’) // false 


hasOwnProperty() 方 法 是 JavaScript 中 唯一 一 个 处 理 对 象 属性 时 ， 不 会 遍历 原型 链 的 方法 。 
10.4.3 in 运算 符 和 for-in 循环 


志 运 算 符 返回 一 个 布尔 值 , 表示 一 个 对 象 是 否 具有 某 个 属性 。 它 不 区 分 该 属性 是 对 象 自身 的 属性 ， 
还 是 继承 的 属性 。 
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| ER 
‘Jength' in Date /trmne 
'oString in Date // tme 


加 运算 符 常 用 于 检查 一 个 属性 是 否 存在 。 
获得 对 象 的 所 有 可 枚 举 属性 不管 是 自身 的 还 是 继承 的 )， 可 以 使 用 for-in 循环 。 例 如 : 
varol = {pl: 123}; 


var 02 = Object.create(o1, { 


| Pp2: {value: "abc". enumerable: true} 
| »; 

for (p in 02) {console.info(p):} 

//p2 

/pl1 


为 了 在 forin 循环 中 获得 对 象 自身 的 属性 ， 可 以 采用 hasOwnProperty0 方 法 判断 一 下 。 例 如 : 
for (var name in object) { 


if(object.hasOwnProperty(name)) { 
/*loop code */ 


上 


获得 对 象 的 所 有 属性 〈 不 管 是 自身 的 还 是 继承 的 ， 以 及 是 否 可 枚 举 )， 可 以 使 用 下 面 的 函数 。 
| function inheritedPropertyNames(obj) { 
| Var props = {}; 
| while (ob)) { 
Object.getOwnPropertyNames(obj).forEach(function(p) { 
Props[p] = true: 


obj = Object.getPrototypeOf(obj): 


Tetum ObjectgetOwnPropertyNames(props): 


| 由 

| 上 面 代码 依次 获取 obj 对 象 的 每 一 级 原型 对 象 “ 自 身 ” 的 属性 ， 从 而 获取 obj 对 象 的 “所 有 ” 属 
| 性 ， 不 管 是 否 可 遍历 。 下 面 示例 列 出 Date 对 象 的 所 有 属性 。 

| 


inheritedPropertyNames(Date) 


10.4.4 ”对象 的 拷贝 


如 果 要 拷贝 一 个 对 象 ， 需 要 做 到 下 面 两 件 事情 。 

加 ”确保 拷贝 后 的 对 象 ， 与 原 对 象 具 有 同样 的 prototype 原型 对 象 。 
确保 拷贝 后 的 对 象 ， 与 原 对象 具 有 同样 的 属性 。 

【示例 】 下 面 就 是 根据 上 面 两 点 ， 编 写 的 对 象 拷贝 的 函数 。 
fnnction copyObject(orig) { 

var copy = Object.create(Object.getPrototypeOf(orig)): 

| copyOwnPropertiesFrom(copy. orig): 
| Tetum copy: 
| 
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function copyOwnPropertiesFrom(target, source) { 
Object 
getOwnPropertyNames(source) 
forEach(function(propKey) { 
Var desc = Object.getOwnPropertyDescriptor(source, propKey); 
Object.defineProperty(target. propKey desc): 


D; 
Tetum target: 


} 


另 一 种 更 简单 的 写法 ， 是 利用 ECMAScript2017 才 引 入 标准 的 Object.getOwnPropertyDescriptors | 
方法 * | 
| 

| 


function copyObject(orig) { 
Tetum Object.create( 
Object.getPrototypeOftorig). 
Object.getOwnPropertyDescriptors(orig) | 
» | 
| 


10.5 面向 对 象 编程 模式 


本 节 介绍 Javaseript 语言 实际 编程 中 ， 涉 及 面向 对 象 编程 的 一 些 模式 。 
10.5.1 ”构造 函数 的 继承 


让 一 个 构造 函数 继承 另 一 个 构造 函数 ， 是 非常 常见 的 需求 。 这 可 以 分 成 以 下 两 步 实现 。 
(1) 在 子 类 的 构造 函数 中 ， 调 用 父 类 的 构造 函数 。 


function Sub(value) { | 
Super.call(this): | 
this.prop = value: | 
} | 


在 上 面 代码 中 ,Sub 是 子 类 的 构造 函数 ,this 是 子 类 的 实例 .在 实例 上 调用 父 类 的 构造 函数 Super， 

就 会 让 子 类 实例 具有 父 类 实例 的 属性 。 
(2) 让 子 类 的 原型 指向 父 类 的 原型 ， 这 样子 类 就 可 以 继承 父 类 原型 。 

Sub prototype = Object.create(Super.prototype): 

Sub.prototype.constructor = Sub: 

Sub.prototype.method ="...: 

在 上 面 代码 中 ，Sub.prototype 是 子 类 的 原型 ， 要 将 它 赋 值 为 Object.create(Super.prototype)， 而 不 
是 直接 等 于 Superprototype。 和 否则 后 面 两 行 对 Sub.prototype 的 操作 ， 会 连 父 类 的 原型 Superprototype 
一 起 修改 掉 。 

另 一 种 写法 是 Sub.prototype 等 于 一 个 父 类 实例 。 例 如 : 


Sub.prototype = new Super0: 
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不 
| 上面 这 种 写法 也 有 继承 的 效果 , 但是 子 类 会 具有 父 类 实例 的 方法 。 有 时 , 这 可 能 不 是 我 们 需要 的 ， 
| 所 以 不 推荐 使 用 这 种 写法 。 
【示例 】 下 面 是 一 个 Shape 构造 函数 。 

function ShapeO { 

this.x=0; 

this.y= 0; 


| Shape.prototype.move = function(x, y) { 
| thisx +=x: 
this.y+= y; 
| console.info(Shape moved.): 
| 
| } 
| 下面 需 要 让 Rectangle 构造 函数 继承 Shape。 


/ 步骤 (1) 子 类 继承 父 类 的 实例 
| function RectangleO { 
| Shape.call(this); // 调用 父 类 构造 函数 
| } 
/ 另 一 种 写法 
function RectangleO { 
| this.base = Shape: 
| this.baseO: 
| b 
/ 步骤 (2) 子 类 继承 父 类 的 原型 
Rectangle.prototype = Object.create(Shape.prototype): 
Rectangle.prototype.constructor = Rectangle: 
采用 这 样 的 写法 以 后 ，instanceof 运算 符 会 对 子 类 和 父 类 的 构造 函数 ， 都 返回 true。 


Var rect = new Rectangle(); 


rect.move(1. 1) // "Shape moved. 
| Tect instanceof Rectangle CC//true 
| Tect instanceof Shape /time 
| 


在 上 面 代码 中 ， 子 类 是 整体 继承 父 类 。 有 时 只 需要 单个 方法 的 继承 ， 这 时 可 以 采用 下 面 的 写法 。 
ClassB.prototype.print = fonction0O { 

| ClassA.prototype.print.call(this): 

| // some code 

| 

| 在 上 面 代码 中 ， 子 类 B 的 print 方法 先 调用 父 类 A 的 print 方法 ， 再 部 署 自己 的 代码 。 这 就 等 于 

| 继承 了 父 类 A 的 print 方法 。 

| 


10.5.2 多重 继承 


| JavaScript 不 提供 多 重 继承 功能 ， 即 不 允许 一 个 对 象 同时 继承 多 个 对 象 。 但 是 ， 可 以 通过 变通 方 
| 法 ， 实 现 这 个 功能 。 
| 
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function M10 { 
this.hello = hello': 

由 

function M20 { 
this.world = "world'; 

} 

function SO { 
M1.call(this):; 
M2.call(this): 


} 
/ 继承 M1 


S.prototype = Object.create(M1.prototype); 


// 继承 链 上 加 入 M2 


Obiectassign(S.prototype, M2.prototype): 


/ 指定 构造 函数 
S.prototype.constructor = S$: 
Var s= new SO: 

s.hello // ‘hello: ' 

s.world // ‘world' 


在 上 面 代码 中 ， 子 类 S 同时 继承 了 父 类 M1 和 M2。 这 种 模式 又 称 为 Mixin (混入 )。 


10.5.3 ”模块 


随 着 网 站 逐渐 变 成 “互联 网 应 用 程序 ”， 嵌 入 网 页 的 JavaScript 代码 越 来 越 庞大 ， 越 来 越 复杂 。 
网 页 越 来 越 像 桌面 程序 ， 需 要 一 个 团队 分 工 协作 、 进 度 管理 、 单 元 测试 等 ， 开 发 者 不 得 不 使 用 软件 工 


程 的 方法 ， 管 理 网 页 的 业务 迪 辑 。 


JavaScript 模块 化 编程 ， 已 经 成 为 一 个 迫切 的 需求 。 理 想 情况 下 ， 开 发 者 只 需要 实现 核心 的 业务 


逻辑 ， 其 他 都 可 以 加 载 别 人 已 经 写 好 的 模块 。 


但 是 ，JavaScript 不 是 一 种 模块 化 编程 语言 ，ECMAScripts 不 支持 “类 ”(class)， 也 不 支持 “ 模 | 


块 ”(module)。ECMAScript 6 才 正 式 支持 “类 ”和 “模块 >， 但 还 没有 成 为 主流 。JavaScript 社 


了 很 多 努力 ， 在 现 有 的 运行 环境 中 实现 模块 的 效果 。 


1. 基本 的 实现 方法 


模块 是 实现 特定 功能 的 一 组 属性 和 方法 的 封装 。 


只 要 把 不 同 的 函数 〈 以 及 记录 状态 的 变量 ) 简单 地 放 在 一 起 ， 就 算是 一 个 模块 。 


function ml0 { 


上 面 的 函数 m10 和 m20 组 成 一 个 模块 。 使 用 时 ， 直 接 调用 即 可 。 


区 做 


这 种 做 法 的 缺点 很 明显 :“ 污 染 ” 了 全 局 变量 ， 无 法 保证 不 与 其 他 模块 发 生变 量 名 冲突 ， 而 且 模 


块 成 员 之 间 看 不 出 直接 关系 。 


为 了 解决 上 面 的 缺点 ， 可 以 把 模块 写成 一 个 对 象 ， 所 有 的 模块 成 员 都 放 到 这 个 对 象 里 面 。 
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var modulel = new Object({ 
_count: 0. 


上 面 的 函数 m10 和 m20， 都 封装 在 modulel 对 象 中 。 使 用 时 ， 调 用 这 个 对 象 的 属性 即 可 。 
| modulel .m10:; 
| 但 是 ， 这 样 的 写法 会 暴露 所 有 模块 成 员 ， 内 部 状态 可 以 被 外 部 改写 。 例 如 ， 外 部 代码 可 以 直接 改 
| 变 内 部 计数 器 的 值 。 
modulel. count=5; 


2. 封装 私有 变量 : 构造 函数 的 写法 
可 以 利用 构造 函数 封装 私有 变量 。 
function StringBuilderO { 

var buffer = []; 
| this.add = function(str) { 
| buffer.push(str): 
| 5 


愉 

this.toString = functionO { 
Teturn buffer.join("); 

}; 


| 
| 
| 
| 这 种 方法 将 私有 变量 封装 在 构造 函数 中 ,违反 了 构造 函数 与 实例 对 象 相 分 离 的 原则 。 并 且 ， 非 党 


StringBuilder.prototype = { 
constructor: StringBuilder. 
| add: function(str) { 
| this._buffer.push(str): 
| ， 
| toString: function0O { 
Tetum this._buffer.join("): 


} 
| 下 
| 
| 这 种 方法 将 私有 变量 放 入 实例 对 象 中 , 好 处 是 看 上 去 更 自然 , 但 是 它 的 私有 变量 可 以 从 外 部 读 写 ， 
| 不 是 很 安全 。 


3. 封装 私有 变量 : 立即 执行 函数 的 写法 
| 使 用 “立即 执行 函数 ”(Immediately-Invoked Function Expressionp，IIFE)， 将 相关 的 属性 和 方法 


人 


封装 在 一 个 函数 作用 域 里 面 ， 可 以 达到 不 暴露 私有 成 员 的 目的 。 
var modulel = (fonction0 { 


使 用 上 面 的 写法 ， 外 部 代码 无 法 读 取 内 部 的 _count 变量 。 

console.info(modulel. count); // undefined 

上 面 的 modulel 就 是 JavaScript 模块 的 基本 写法 。 下 面 再 对 这 种 写法 进行 加 工 。 

4. 模块 的 放大 模式 

如 果 一 个 模块 很 大 ， 必 须 分 成 几 个 部 分 ， 或 者 一 个 模块 需要 继承 另 一 个 模块 ， 这 时 就 有 必要 采用 
“放大 模式 ”(augmentation ) 。 

var modulel = Cnction(mod) { 


mod.m3 = function| { 
lows 


上 面 的 代码 为 modulel 模块 添加 了 一 个 新 方法 m30， 然 后 返回 新 的 modulel 模块 。 
在 浏览 器 环境 中 ,模块 的 各 个 部 分 通常 都 是 从 网 上 获取 的 ， 有 时 无 法 知道 哪个 部 分 会 先 加 载 。 如 
果 采 用 上 面 的 写法 ， 第 一 个 执行 的 部 分 有 可 能 加 载 一 个 不 存在 空 对 象 ， 这 时 就 要 采用 “ 宽 放大 模式 ” 


(Loose augmentation )。 
var modulel = (function(mod) { 
Tetum mod: 
Dwindow.modulel | 0); 
与 “放大 模式 ” 相 比 ,“ 宽 放大 模式 ”就 是 “立即 执行 函数 ”的 参数 可 以 是 空 对 象 。 
5. 输入 全 局 变量 


独立 性 是 模块 的 重要 特点 ， 模 块 内 部 最 好 不 与 程序 的 其 他 部 分 直接 交互 。 
为 了 在 模块 内 部 调用 全 局 变量 ， 必 须 显 式 地 将 其 他 变量 输入 模块 。 
var modulel = (function($. YAHOO) { 


DQuery, YAHOO): 
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| 上 面 的 modulel 模块 需要 使 用 jQuery 库 和 YUI 库 ， 就 把 这 两 个 库 〈 其 实 是 两 个 模块 ) 当 作 参 数 
| 输入 modulel。 这 样 做 除了 保证 模块 的 独立 性 ， 还 使 得 模块 之 间 的 依赖 关系 变 得 明显 。 
| 立即 执行 函数 还 可 以 起 到 命名 空间 的 作用 。 
傅 关 GacionG widow aocineibf 
二 人 function goum) { 


; 
function handleEventsO { 


} 
} 
| function dieCarouselDieO { 
| } 
| // attach to the global scope 

window.finalCarousel = { 

init: initialize, 

| destroy: dieCouraselDie 

b 
))GQuery window, document): 
| 在 上 面 代码 中 ，finalCarousel 对 象 输出 到 全 局 ， 对 外 暴露 init 和 destroy 接口 ， 内 部 方法 go、 
| handleEvents、initialize、dieCarouselDie 都 是 外 部 无 法 调用 的 。 


10.6 案例 实战 


本 节 将 通过 多 个 示例 代码 介绍 JavaScript 构造 类 型 的 灵活 设计 。 
| 10.6.1 设计 工厂 模式 


| 工厂 模式 是 一 种 创建 类 型 的 模式 ， 目 的 是 为 了 简化 创建 对 象 的 流程 ， 它 把 对 象 实例 化 简单 封装 在 
一 个 函数 中 ， 然 后 通过 函数 调用 ， 实 现 快速 、 批 量 生产 对 象 。 详 细 说 明和 示例 代码 请 扫 码 阅读 。 


10.6.2 ”设计 类 继承 
类 继承 设计 方法 ， 在 子 类 中 执行 父 类 的 构造 函数 。 详 细 说 明和 示例 代码 请 扫 码 阅读 。 
| 10.6.3 ”设计 构造 原型 模式 


| 构造 函数 原型 模式 正 是 为 了 解决 原型 模式 而 诞生 的 一 种 混合 设计 模式 , 它 是 把 构造 函数 模式 与 原 
回 | 型 模式 混合 使 用 。 详 细 说 明和 示例 代码 请 扫 码 阅读 。 


| 10.6.4 设计 动态 原型 模式 


| 动态 原型 模式 与 构造 函数 原型 模式 在 性 能 上 是 等 价 的 , 用 户 可 以 自由 选择 , 不 过 构造 原型 模式 应 
用 比较 广泛 。 详 细 说 明和 示例 代码 请 扫 码 阅读 。 
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10.6.5 ”设计 实例 继承 
使 用 实例 继承 法 能 够 实现 对 所 有 JavaSeript 核心 对 象 的 继承 。 详 细 说 明和 示例 代码 请 扫 码 阅读 。 
10.6.6 ”惰性 实例 化 | 


惰性 实例 化 所 要 解决 的 问题 是 ， 避 免 了 在 页 面 中 JavaScript 初始 化 执行 时 就 实例 
化 类 。 详 细 说 明和 示例 代码 请 扫 码 阅读 。 


10.6.7 “安全 构造 对 象 线 上 阅读 


由 于 this 是 在 运行 时 绑 定 ， 因 此 直接 调用 构造 函数 时 将 导致 异常 现象 ,本 节 示 例 演示 了 如 何 解决 
这 个 问题 。 详 细 说 明和 示例 代码 请 扫 码 阅读 。 
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BOM 操作 


BOM ( Browser Object Model， 浏 览 器 对 象 模型 ) 主要 用 于 管理 浏览 器 窗口 ， 提 供 独 立 
的 、 可 与 浏览 器 窗口 进行 互动 的 API。BOM 缺乏 标准 ， 但 它 广泛 应 用 于 Web 开发 之 中 ， 各 
主流 浏览 器 均 支 持 BOM。 随 着 客户 端 开发 进一步 的 普及 和 完善 ，W3C 已 经 将 BOM 的 主要 


方面 纳入 了 HTML5 规范 之 中 


【 学 习 重 点 】 

WI 使 用 window 对 象 和 框架 集 ， 

WI 使 用 navigator、location、screen 对 象 
WI 使 用 JavaScript 检测 用 户 代理 信息 
WI 使 用 JavaScript 定位 和 导航 
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11.1 window 对 象 


在 浏览 器 中 ，window 对 象 注意 ，w 为 小 写 ) 指 当前 的 浏览 器 窗口 。 它 也 是 所 有 对 象 的 顶层 对 象 。 


安 提示 : 顶层 对 象 指 的 是 最 高 一 层 的 对 象 ， 所 有 其 他 对 象 都 是 它 的 下 属 。JavaScript 规 定 ， 浏 览 器 | 
环境 的 所 有 全 局 变量 ， 都 是 window 对 象 的 属性 . | 


11.1.1 window 对 象 属性 | 
window 对 象 包 含 众多 属性 ， 使 用 这 些 属性 可 以 实现 对 浏览 器 窗口 的 访问 ， 具 体 说 明 如 下 。 | 
1. window.window 和 window.name | 
window 对 象 的 window 属性 指向 自身 。 例 如 : 
window.window = 一 this / 返回 值 tue | 
window.name 属性 用 于 设置 当前 浏览 器 窗口 的 名 字 。 例 如 : 
window.name = 'Hello World' 
console.log(window.name) // 返回 值 "Hello World!" 
各 个 浏览 器 对 这 个 值 的 储存 容量 有 所 不 同 ， 但 是 一 般 来 说 ， 可 以 高 达 几 MB。 
该 属性 只 能 保存 字符 串 ， 且 当 浏 览 器 窗口 关闭 后 ， 所 保存 的 值 就 会 消失 。 因 此 局 限 性 比较 大 ， 但 
是 与 <iframe> 窗 口 通信 时 ， 非 常 有 用 。 
2. window.location 
window.location 返回 一 个 location 对 象 ， 用 于 获取 窗口 当前 的 URL 信息 。 它 等 同 于 
document.location 对 象 。 例 如 : 
Windowlocation 一 documentlocation // 返回 值 me 


3. window.closed 和 window.opener 

window.closed 属性 返回 一 个 布尔 值 ， 表 示 窗 口 是 否 关闭 。 例 如 : 

window.closed // 返回 值 false 

上 面 代 码 检查 当前 窗口 是 否 关闭 。 这 种 检查 意义 不 大 ， 因 为 只 要 能 运行 代码 ， 当 前 窗口 肯定 没有 
关闭 。 这 个 属性 一 般 用 来 检查 使 用 脚本 打开 的 新 窗口 是 否 关 闭 。 例 如 : 


var popup = window.openO: 
这 (popup ! 一 nulD) &é& !popup.closed) { 


/ 窗口 仍然 打开 着 

有 

window.opener 属性 返回 打开 当前 窗口 的 父 窗口 。 如 果 当 前 窗口 没有 父 窗口 , 则 返回 null。 例 如 : 
window.openO.opener — window // 返回 值 tme 


上 面 表达 式 会 打开 一 个 新 窗口 ， 然 后 返回 true。 
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通过 opener 属性 ， 可 以 获得 父 窗口 的 全 局 变量 和 方法 ， 如 window.opener.propertyName 和 
window.opener functionName。 但 这 只 限于 两 个 窗口 属于 同 源 的 情况 ， 且 其 中 一 个 窗口 由 另 一 个 打开 。 

4. window.frames 和 window.length 

windowframes 属性 返回 一 个 类 似 数组 的 对 象 ， 成 员 为 页 面 内 所 有 框架 窗口 ， 包 括 frame 元 素 和 
过 ame 元 素 。window .frames[0] 表 示 页 面 中 第 一 个 框架 窗口 。 

如 果 过 ame 元 素 设置 了 id 或 name 属性 ， 那 么 就 可 以 用 属性 值 引 用 这 个 这 ame 窗口 。 如 <iframe 
name="myIFrame"> 就 可 以 用 frames['myIFrame'] 或 者 frames.myIFrame 来 引用 。 

frames 属性 实际 上 是 window 对 象 的 别名 。 例 如 : 

frames 一 =- window // 返回 值 me 

因此 , frames[0] 也 可 以 用 window[0] 表 示 。 但 是 , 从 语义 上 看 , frames 更 清晰 , 而 且 考 虑 到 window 
还 是 全 局 对 象 ， 因 此 推荐 表示 多 窗口 时 ， 总 是 使 用 frames[0] 的 写法 。 

window.length 属性 返回 当前 网 页 包含 的 框架 总 数 。 如果 当前 网 页 不 包含 fame 和 这 ame 元 素 , 那 
么 window.length 就 返回 0。 例 如 : 

window.frames.length -一 windowlength // 返回 值 me 


window .frames.length 与 window.length 应 该 相等 。 

5. window.screenX 和 window.screenY 

window.screenX 和 window.screenY 属性 , 返回 浏览 器 窗口 左上 角 相 对 于 当前 屏幕 左上 角 ((0, 0)) 
的 水 平 距离 和 垂直 距离 ， 单 位 为 像素 。 

6. window.innerHeight 和 window.innerWidth 

window.innerHeight 和 window.innerWidth 属性 ， 返 回 网 页 在 当前 窗口 中 可 见 部 分 的 高 度 和 宽度 ， 
即 “ 视 口 ”(viewport)， 单 位 为 像素 。 

当 用 户 放 大 网 页 时 (如 将 网 页 从 100% 的 大 小 放大 为 200%)， 这 两 个 属性 会 变 小 。 因 为 这 时 网 页 
的 像素 大 小 不 变 〈 如 宽度 还 是 960 像素 )， 只 是 每 个 像素 占据 的 屏幕 空间 变 大 了 ， 因 为 可 见 部 分 〈 视 


| 口 ) 就 变 小 了 。 


< 全 注意 : 这 两 个 属性 值 包 括 滚动 条 的 高 度 和 宽度 。 


7. window.outerHeight 和 window.outerWidth 


window.outerHeight 和 window.outerWidth 属性 返回 浏览 器 窗口 的 高 度 和 宽度 , 包括 浏览 器 菜单 和 
边框 ， 单 位 为 像素 。 


8. window.pageXOffset 和 window.pageYOffset 


windowpageXOffset 属性 返回 页 面 的 水 平 滚动 距离 ，windowpageYOffset 属性 返回 页 面 的 垂直 滚 
动 距 离 ， 单 位 都 为 像素 。 

例如 ， 如 果 用 户 向 下 拉动 了 垂直 滚动 条 75 像素 ， 那 么 window.pageYOffset 就 是 75。 用 户 水 平 向 
右 拉动 水 平 滚动 条 200 像素 ，windowpageXOffset 就 是 200。 


11.1.2 ”window 对 象 方法 
下 面 再 来 看 下 window 对 象 的 方法 ， 这 些 方 法 能 够 方便 控制 浏览 器 窗口 ， 具 体 说 明 如 下 。 


“298。 


<) 


第 11 间 BO 排 作 一 § > | 

1. window.moveTo() 和 window.moveBy() 

window.moveTo0 方 法 用 于 移动 浏览 器 窗口 到 指定 位 置 。 它 接受 两 个 参数 ， 分 别 是 窗口 左上 角 距 
离 屏幕 左上 角 的 水 平 距离 和 垂直 距离 ， 单 位 为 像素 。 例 如 : 

window.moveTo(100, 200) 

上 面 代码 将 窗口 移动 到 屏幕 (100, 200) 的 位 置 。 

window.moveBy0 方 法 将 窗口 移动 到 一 个 相对 位 置 。 它 接受 两 个 参数 ， 分 别 是 窗口 左上 角 向 右 移 | 
动 的 水 平 距离 和 向 下 移动 的 垂直 距离 ， 单 位 为 像素 。 例 如 : | 

window.moveBy(25. 50) | 

| 

上 面 代码 将 窗口 向 右 移动 25 像素 、 向 下 移动 50 像素 。 | 

2. window.scrollTo() 和 window.scrollBy() 

window.scrollTo0 方 法 用 于 将 网 页 的 指定 位 置 滚动 到 浏览 器 左上 角 。 它 的 参数 是 相对 于 整个 网 页 
的 横 坐 标 和 纵 坐 标 ， 也 称 为 window.scroll。 例 如 : 

window.scrollTo(0, 1000); 

windowserollBy() 方 法 用 于 将 网 页 移动 指定 距离 ， 单 位 为 像素 。 它 接受 两 个 参数 : 向 右 滚动 的 像 | 
素 ， 向 下 滚动 的 像素 。 例 如 : 

window.scrollBy(0, window.innerHeight) 

上 面 代码 用 于 将 网 页 向 下 滚动 一 屏 。 

3. window.open() 和 window.close() 

windowopen() 方 法 用 于 新 建 另 一 个 浏览 器 窗口 ， 并 且 返 回 该 窗口 对 象 。 例 如 : 

Var popup = window.open(somefile .htmly): 

上 面 代码 会 让 浏览 器 弹出 一 个 新 建 窗口 ， 网 址 是 当前 域名 下 的 somefile html。 

open 方法 一 共 可 以 接受 4 个 参数 ， 简 单 说 明 如 下 。 

第 一 个 参数 : 字符 串 ， 表 示 新 窗口 的 网 址 。 如 果 省 略 ， 默 认 网 址 就 是 about:blank。 

第 二 个 参数 : 字符 串 ， 表 示 新 窗口 的 名 字 。 如 果 该 名 字 的 窗口 已 经 存在 ， 则 跳 到 该 窗口 ， 不 再 新 
建 窗口 。 如 果 省 略 ， 就 默认 使 用 _blank， 表 示 新 建 一 个 没有 名 字 的 窗口 。 

第 三 个 参数 : 字符 串 ， 内 容 为 逗号 分 隔 的 键 值 对 ， 表 示 新 窗口 的 参数 ， 如 有 没有 提示 栏 、 工 具 条 
等 。 如 果 省 略 ， 则 默认 打开 一 个 完整 UI 的 新 窗口 。 

第 四 个 参数 : 布尔 值 ， 表 示 第 一 个 参数 指定 的 网 址 ， 是 否 应 该 蔡 换 history 对 象 之 中 的 当前 网 址 
记录 ， 默 认 值 为 false。 显 然 ， 这 个 参数 只 有 在 第 二 个 参数 指向 已 经 存在 的 窗口 时 ， 才 有 意义 。 

【示例 1】 下面 是 一 个 简单 的 示例 。 


‘height=200.width=200.location=no.status=yes.resizable=yes.scrollbars=yes" 
); 
上 面 代码 表示 : 打开 的 新 窗口 高 度 和 宽度 都 为 200 像素 ， 没 有 地 址 栏 和 滚动 条 ， 但 有 状态 栏 ， 允 
许 用 户 调整 大 小 。 
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4 注意 ; 如 果 在 第 三 个 参数 中 设置 了 一 部 分 参数 ， 其 他 没有 被 设置 的 yes/no 参数 都 会 被 设 成 no， 
只 有 titlebar 和 关闭 按钮 除外 (默认 值 为 yes ) 。 


大 | 另外 ，open() 方 法 的 第 二 个 参数 虽然 可 以 指定 已 经 存在 的 窗口 ， 但 是 不 等 于 可 以 任意 控制 其 他 窗 
鲜 | 口 。 为 了 防止 被 不 相干 的 窗口 控制 , 浏览 器 只 有 在 两 个 窗口 同 源 , 或 者 目标 窗口 被 当前 网 页 打开 的 情 

， 况 下 ， 才 人 允许 open0 方 法 指向 该 窗口 。 

open() 方 法 返回 新 窗口 的 引用 。 例 如 : 
| Var windowB = window.open(‘windowB.html'. "WindowB'): 
| windowB.window.name // "WindowB" 
| 【示例 2 下 面 示例 先 打开 一 个 新 窗口 ,然后 在 该 窗口 弹出 一 个 对 话 框 ,再 将 网 址 导向 example.com。 
| Var W = window.open(); 
| 


walert( 已 经 打开 新 窗口 ): 
w.location = "http:// example.com'; 


| 由 于 openO 这 个 方法 很 容易 被 滥用 ,许多 浏览 器 默认 都 不 允许 脚本 自动 新 建 窗口 。 只 允许 在 用 户 
| 单 击 链 接 或 按钮 ， 肢 本 做 出 反应 ， 弹 出 新 窗口 。 因 此 ， 有 必要 检查 一 下 打开 新 窗口 是 否 成 功 。 例 如 : 
| 


| if (popup — null) { 

| / 新 建 窗口 失败 

| 本 本 

| windowelose 方法 用 于 关闭 当前 窗口 ， 一 般 用 来 关闭 windowopen 方法 新 建 的 窗口 。 例 如 : 
| popup.closeO 


该 方法 只 对 顶层 窗口 有 效 ，iframe 框架 之 中 的 窗口 使 用 该 方法 无 效 。 
4. window.print() 
window.print0 方 法 会 跳出 打印 对 话 框 ， 同 用 户 单 击 菜单 中 的 “打印 ”命令 效果 相同 。 
【示例 3】 在 页 面 中 设计 一 个 打印 按钮 ， 然 后 绑 定 如 下 代码 。 

document.getElementById(printLink).onclick = fnnctionO { 

windowprintO: 
由 
非 桌面 设备 〈 如 手机 ) 可 能 没有 打印 功能 ， 这 时 可 以 通过 如 下 方式 进行 判断 。 
if (typeof windowprint — ‘finction’) { 
| / 支持 打印 功能 
| > 
| 

5. window.getComputedStyle() 

| window.getComputedStyle0 方 法 接受 一 个 HTML 元 素 作为 参数 ， 返 回 一 个 包含 该 HTML 元 素 的 
| 最 终 样式 信息 的 对 象 。 详 细 说 明 请 参考 后 面 章节 内 容 。 
| 6. window.matchMedia() 
| window.matchMedia() 方 法 用 来 检查 CSS 的 mediaQuery 语句 。 详 细 说 明 请 参考 后 面 章 节 内 容 。 
7. window.focus() 


| window focus0 方 法 会 激活 指定 当前 窗口 ， 使 其 获得 焦点 。 例 如 : 
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var popup = window.open(popup.html'. Popup Window’): 
if ((popup ! 一 nulD) && !popup.closed) { 

popup.focus|; 
> 


上 面 代码 先 检查 popup 窗口 是 否 依然 存在 ， 确 认 后 激活 该 窗口 。 
当前 窗口 获得 焦点 时 ， 会 触发 focus 事件 ， 当 前 窗口 失去 焦点 时 ， 会 触发 blur 事件 。 


8. window.getSelection() 

window.getSelection0 方 法 返回 一 个 Selection 对 象 ， 表 示 用 户 现在 选中 的 文本 。 例 如 : 
Var selObj = window.getSelectionO; 

使 用 Selction 对 象 的 toString() 方 法 可 以 得 到 选中 的 文本 。 例 如 : 
Var selectedText = selObj.toStringO: 


11.1.3 ”window 对 象 事件 
window 对 象 可 以 接收 以 下 事件 。 
1. load 事件 和 onload 属性 
load 事件 发 生 在 文档 在 浏览 器 窗口 加 载 完毕 时 。window.onload 属性 可 以 指定 这 个 事件 的 
数 。 例 如 : 


window.onload = function() { 
Var elements = document.getElementsByClassName('‘example'): 
for(var i= 0:i< elementslength: i++) { 
var elt = elements[i]: 
WEE 


五 


调 函 


于 
上 面 代码 在 网 页 加 载 完 毕 后 ， 获 取 指定 元 素 并 进行 处 理 。 
2. error 事件 和 onerror 属性 | 
浏览 器 脚本 发 生 错误 时 ,会 触发 window 对 象 的 error 事件 。 可 以 通过 window.onerror 属性 对 该 事 | 
件 指 定 回调 函数 。 例 如 : 


window.onerror = function(message. filename. lineno, colno., error) { 
console.log(" 出 错 了 ! --> %s", errorstack); 


$B 


于 历史 原因 ，window 的 error 事件 的 回调 函数 不 接受 错误 对 象 作为 参数 ， 而 是 一 共 可 以 接受 | 
5 个 参数 ， 它 们 的 含义 依次 为 出 错 信息 、 出 错 脚本 的 网 址 、 行 号 、 列 号 和 错误 对 象 。 | 
老式 浏览 器 只 支持 前 3 个 参数 。 | 
并 不 是 所 有 的 错误 都 会 触发 JavaScript 的 error 事件 ( 即 让 JavaScript 报错 ), 只 限于 以 下 三 类 事件 。 
JavaScript 语言 错误 。 

JavaScript 脚本 文件 不 存在 。 

图 像 文 件 不 存在 。 
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以 下 两 类 事件 不 会 触发 JavaScript 的 error 事件 。 

CSS 文件 不 存在 。 

过 ame 文件 不 存在 。 

会 内 | 【 示例】 下面 示例 演示 如 果 整 个 页 面 未 捕获 错误 超过 3 个 ， 就 显示 警告 。 
ER 


if (onerror.num++ > onerror.max) { 
| alert(ERROR: '+ msg +"\n'+url+"'+ line); 
| Tetum true; 


| < 蚀 注意 : 如 果 脚 本 网 址 与 网 页 网 址 不 在 同一 个 域 (如 使 用 了 CDN ) ， 浏 览 器 根本 不 会 提供 详细 的 
出 错 信息 ， 只 会 提示 出 错 ， 错 误 类 型 是 “Script emror.”， 行 号 为 0， 其 他 信息 都 没有 。 这 
是 浏览 器 防止 向 外 部 脚本 泄漏 信息 。 一 个 解决 方法 是 在 脚本 所 在 的 服务 器 ， 设 置 
Access-Control-Allow-Origin 的 HITP 头 信息 。 例 如 : 
Access-Control-Allow-Origin: * 
然后 ， 在 网 页 的 <script> 标 签 中 设置 crossorigin 属性 。 例 如 : 
<script crossorigin="anonymous" sre="// example.conyfile.js"></script> 
上 面 代码 的 crossorigin="anonymous" 表 示 ， 读 取 文件 不 需要 身份 信息 ， 即 不 需要 cookie 和 HTTP 
认证 信息 。 如 果 设 为 crossorigin="use-credentials"， 就 表示 浏览 器 会 上 传 cookie 和 HTTP 认证 信息 ， 
同时 还 需要 服务 器 端 打开 HTTP 头 信息 Access-Control-Allow-Credentials。 


11.1.4 ”访问 浏览 器 对 象 
i 


通过 window 对 象 可 以 访问 浏览 器 窗口 , 同时 与 浏览 器 相关 的 其 他 客户 
端 对 象 都 是 window 的 子 对 象 ， 通 过 window 属性 进行 引用 。 具 体 说 明 请 扫 
码 阅 读 。 
全 局 作用 域 
客户 端 JavaScript 代码 都 在 全 局 上 下 文 环境 中 运行 , window 对 象 提供 了 全 局 作 


用 域 。 由 于 window 对 象 是 全 局 对 象 ,因此 所 有 的 全 局 变量 都 被 视 为 该 对 象 的 属性 。 具 
体 说 明 请 扫 码 阅读 。 


使 用 人 机 互动 方法 


alert0、promptO、confirm0) 都 是 浏览 器 与 用 户 互动 的 全 局 方法 。 它 们 会 弹出 不 同 
的 对 话 框 ， 要 求 用 户 做 出 回应 。 注 意 ，alert0、promptO、confirmO 这 3 个 方法 弹出 的 
对 话 框 ， 都 是 浏览 器 统一 规定 的 式样 ， 是 无 法 定制 的 。 当 然 ， 可 以 重 写 这 些 方法 ， 自 
定义 对 话 框 的 样式 。 具 体 说 明 请 扫 码 阅读 。 
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11.1.7 ”打开 和 关闭 窗口 


使 用 window 对 象 的 open0 方 法 ， 可 以 打开 一 个 新 窗口 。 在 11.1.2 节 曾 经 简单 
介绍 过 open0 方 法 ， 本 节 将 通过 两 个 案例 详细 展开 它 使 用 。 具 体内 容 请 扫 码 阅读 。 


11.1.8 ”使 用 框架 集 

由 于 网 页 可 以 使 用 这 ame 元 素 媒 入 其 他 网 页 , 因此 一 个 网 页 中 会 形成 多 个 窗口 。 
另 一 情况 是 ， 子 网 页 中 又 媒 入 别 的 网 页 ， 形 成 多 级 窗口 。 关 于 框架 、 浮 动 框架 和 框 
架 集 的 详细 说 明和 具体 应 用 ， 请 扫 码 阅读 。 
11.1.9 控制 窗口 位 置 


使 用 window 对 象 的 screenLeft 和 screenTop 属性 可 以 读 取 或 设置 窗口 的 位 置 。 
本 节 将 通过 示例 代码 演示 如 何 设 计 兼 容 不 同 浏览 器 的 控制 窗口 位 置 的 方法 。 详 细 内 
容 请 扫 码 阅读 。 


11.1.10 ”控制 窗口 大 小 


使 用 window 对 象 的 innerWidth、innerHeight、outerWidth 和 outerHeight 这 4 个 
属性 可 以 确定 窗口 大 小 。 本 节 将 通过 示例 代码 演示 如 何 设计 兼容 不 同 浏览 器 的 控制 
窗口 大 小 的 方法 。 详 细 内 容 请 扫 码 阅读 。 


11.2 ”navigator 对 象 

window 对 象 的 navigator 属性 指向 一 个 包含 浏览 器 信息 的 对 象 : navigator 对 象 ， 该 对 象 包含 了 浏 | 

览 器 的 基本 信息 ， 如 名 称 、 版 本 和 系统 等 。 | 
11.2.1 _ navigator 对 象 属 性 


navigator 对 象 包含 大 量 属性 , 利用 这 些 属性 可 以 读 取 客户 端 基本 信息 , navigator 对 象 属性 说 明 如 
表 11.1 所 示 。 


表 11.1 navigator 对 象 属性 


属 性 描述 
appCodeName | 返回 浏览 器 的 代码 名 
appMinorVersion | 返回 浏览 器 的 次 级 版 本 
appName | 返回 浏览 器 的 名 称 


返回 浏览 器 的 平台 和 版 本 信息 


返回 当前 浏览 器 的 语言 
cookieEnabled 返回 指明 浏览 器 中 是 否 启 用 _cookie 的 布尔 值 
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二 
| 余 说 
已 
| 
| 
| uClass 返回 浏览 器 系统 的 CPU 等 级 
| onLine 返回 指明 系统 是 否 处 于 脱 机 模式 的 布尔 值 
一 | platform | 返回 运行 浏览 器 的 操作 系统 平台 
SystemLanguage | 返回 OS 使 用 的 默认 语言 
| userAgent | 返回 由 客户 机 发 送 服务 器 的 user-agent 头 部 的 值 


| userLanguage 返回 OS 的 自然 语言 设置 

| 下 面 介绍 一 下 HTML5 中 常 访问 的 属性 。 

1. navigator.userAgent 

| navigator.userAgent 属性 返回 浏览 器 的 User-Agent 字符 串 , 标示 浏览 器 的 厂商 和 版 本 信息 。 例 如， 
| 下 面 是 Chrome 浏览 器 的 userAgent。 


navigator.userAgent 
/ "Mozilla/$.0 (X11; Linux x86 64) Apple WebKit/537.36 (KHTML., like Gecko) 
// Chrome/29.0.1547.57 Safari/537.36" 


| 
| 4 注意 : 通过 userAgent 属性 识别 浏览 器 ， 不 是 一 个 好 办 法 。 因 为 必须 考虑 所 有 的 情况 (不同 的 浏 
| 览 器 ， 不 同 的 版 本 ) ， 则 非常 麻烦 ， 而 且 无 法 保证 未 来 的 适用 性 ， 更 何况 各 种 上 网 设备 层 
出 不 穷 ， 难 以 穷尽 。 所 以 ， 现 在 一 般 不 再 识别 浏览 器 ， 而 是 使 用 “功能 识别 ”方法 ， 即 逐 
一 测试 当前 浏览 器 是 否 支持 要 用 到 的 JavaScript 功能 。 

| 不 过 ， 通 过 userAgent 可 以 大 致 准确 地 识别 手机 浏览 器 ， 方 法 就 是 测试 是 否 包含 mobi 字符 串 。 
| 例如 : 


var ua = navigator.userAgent.toLowerCaseO: 
if (/mobi/i.test(ua)) { 

// 手机 浏览 器 
b 


el 


se { 
// 非 手 机 浏览 器 
} 


如 果 想 要 识别 所 有 移动 设备 的 浏览 器 ， 可 以 测试 更 多 的 特征 字符 串 。 例 如 : 
/mobilandroidltouchlmini/i.test(ua) 

2. navigator.plugins 

navigatorplugins 属性 返回 一 个 类 似 数组 的 对 象 ,成员 是 浏览 器 安装 的 插件 , 如 Flash、ActiveX 等 。 
3. navigator.platform 


| navigator.platform 属性 返回 用 户 的 操作 系统 信息 。 例 如 : 
| navigatorplatform // "Linux x86_64" 
| 
| 


4. navigator.onLine 
navigator.onLine 属性 返回 一 个 布尔 值 ， 表 示 用 户 当前 在 线 还 是 离线 。 例 如 : 
| navigator.onLine // 返回 值 tme 
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外 分 


5. navigator.geolocation 

navigator geolocation 返回 一 个 Geolocation 对 象 ， 包 含 用 户 地 理 位 置 的 信息 。 

6. navigatorjavaEnabled() 和 navigator cookieEnabled 

javaEnabled() 方 法 返回 一 个 布尔 值 ， 表 示 浏 览 器 是 否 能 运行 Java Applet 小 程序 。 例 如 : 


navigatorjavaEnabledO // 返回 值 false | 
cookieEnabled 属性 返回 一 个 布尔 值 ， 表 示 浏 览 器 是 否 能 储存 Cookie。 例 如 : | 
navigator.cookieEnabled // 返回 值 tue | 
| 
| 


< 轴 注意 :这 个 返回 值 与 是 否 储存 某 个 网 站 的 Cookie 无 关 .用 户 可 以 设置 某 个 网 站 不 得 储存 Cookie， 
这 时 cookieEnabled 返回 的 还 是 true。 


11.2.2 浏览 器 检测 方法 


浏览 器 检测 的 方法 有 多 种 ， 常 用 方法 包括 两 种 : 特征 检测 法 和 字符 串 检 
测 法 。 这 两 种 方法 都 存在 各 自 的 优点 与 缺点 ， 用 户 可 以 根据 需要 酌情 选择 。 
具体 示例 演示 请 扫 码 阅读 。 


11.2.3 检测 浏览 器 类 型 和 版 本 号 


检测 浏览 器 类 型 和 版 本 就 比较 容易 , 用户 只 需要 根据 不 同 浏览 器 类 型 匹配 特殊 信息 
即 可 。 具 体 示例 代码 请 扫 码 阅读 。 


11.2.4 检测 客户 操作 系统 


在 navigatoruserAgent 返回 值 中 ， 一 般 都 会 包含 操作 系统 的 基本 信息 ， 不 过 这 些 信 
息 比 较 散 乱 ， 没 有 统一 的 规则 。 一 般 情况 下 用 户 可 以 检测 一 些 更 为 通用 的 信息 。 例 如 ， 
仅 考虑 是 否 为 Windows 系统 ， 或 者 为 Macintosh 系统 ， 而 不 是 分 辨 操作 系统 的 版 本 号 。 
具体 示例 代码 请 扫 码 阅读 。 


11.2.5 ”检测 插件 


用 户 经 常 需要 检测 浏览 器 中 是 否 安装 了 特定 的 插件 。 
对 于 非 下 浏览 器 ， 可 以 使 用 navigator 对 象 的 plugins 属性 实现 。plugins 是 一 个 数组 ， 该 数组 中 
的 每 一 项 都 包含 下 列 属 性 。 

name: 插件 的 名 字 。 

description: 插件 的 描述 。 

filename: 插件 的 文件 名 。 

length: 插件 所 处 理 的 MIME 类 型 数量 。 
具体 示例 代码 请 扫 码 阅读 。 
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11.3 ”location 对 象 


location 对 象 存储 当前 页 面 与 位 置 (URL) 相关 的 信息 ， 表 示 当 前 显示 文档 的 Web 地 址 。 使 用 
window 对 象 的 location 属性 可 以 访问 。 
| location 对 象 定义 了 8 个 属性 ,其 中 7 个 属性 分 别 指向 当前 URL 的 各 部 分 信息 , 另 一 个 属性 (href) 
| 包含 了 完整 的 URL 信息 ， 详 细 说 明 如 表 11.2 所 示 。 为 了 便于 更 直观 地 理解 ， 表 11.2 中 各 个 属性 将 以 
下 面 URL 示例 信息 为 参考 进行 说 明 。 
http:// www.mysite.cn:80/news/index.asp?id=123&name= location#top 


表 11.2 location 对 象 属性 


说 明 
声明 了 当前 显示 文档 的 完整 URL， 与 其 他 location 属性 只 声明 部 分 URL 不 同 ， 把 该 属性 设置 为 
新 的 URL 会 使 浏览 器 读 取 并 显示 新 URL 的 内 容 
Protocol 声明 了 URL 的 协议 部 分 ， 包 括 后 缀 的 冒号 。 例 如 “http:” 
host 声明 了 当前 URL 中 的 主机 名 和 端口 部 分 。 例 如 “www.mysite.cn:80” 
| hostmame | 声明 了 当前 URL 中 的 主机 名 。 例 如 “www.mysite.cn” 
port 声明 了 当前 URL 的 端口 部 分 。 例 如 “80” 
pathname “| 声明 了 当前 URL 的 路 径 部 分 。 例 如 “news/index.asp” 
声明 了 当前 URL 的 查询 部 分 ， 包 括 前 导 问 号 。 例 如 “?id=123&name=location” 
| __hash 声明 了 当前 URL 中 锚 部 分 ， 包 括 前 导 符 〈#) 。 例 如 “#top”， 指 定 在 文档 中 锚 记 的 名 称 
使 用 location 对象， 结合 字符 串 方法 可 以 抽取 URL 中 查询 字符 串 的 参数 值 。 
【 示例】 下面 示例 定义 一 个 获取 URL 查询 字符 串 参数 值 的 通用 函数 ， 该 函数 能 够 抽取 每 个 参数 
和 人参 数值， 并 以 名 / 值 对 的 形式 存储 在 对 象 中 返回 。 
var queryString = functionO { / 获取 URL 查询 字符 串 参数 值 的 通用 函数 
var q = location.search.substring(1); // 获取 查询 字符 串 ， 即 “id=123&name= location” 部 分 
Var a = q.split("&"); / 以 有 & 符 号 为 界 把 查询 字符 串 辟 开 为 数组 
varo= 人: // 定义 一 个 临时 对 象 


for(vari= 0:i<alength: i++) { 
var n = ali].indexOf("="): 
if(n 一 -1) continue; 
var v1 = alil].substring(0. n): 
var v2 = alil.substring(n+1): 
o[v1] = unescape(v2): 

bE 


Tetum o: 


Var f1 = queryStringO: 

for(variinfl) { 

| alerti + "=" +f1[i]): 
J 国 


/ 遍历 数组 

/ 获取 每 个 参数 中 的 等 号 小 标 位 置 

// 如 果 没 有 发 现 则 跳 到 下 一 次 循环 继续 操作 
/ 截取 等 号 前 的 参数 名 称 

/ 截取 等 号 后 的 参数 值 

/ 以 名 / 值 对 的 形式 存储 在 对 象 中 


/ 返回 对 象 


然后 , 在 页 面 中 调用 该 函数 , 即 可 获取 URL 中 的 查询 字符 串 信 息 , 并 以 对 象形 式 读 取 它 们 的 值 。 


/ 调用 查询 字符 串 函数 
/ 遍历 返回 对 象 ， 获 取 每 个 参数 及 其 值 
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如 果 当 前 页 面 的 URL 中 没有 查询 字符 串 信息 ， 用 户 可 以 在 浏览 器 的 地 址 栏 中 补 加 完整 的 查询 字 | 
符 串 ， 如 “?id=123&name=location”， 再 次 刷新 页 面 ， 即 可 显示 查询 的 查询 字符 串 信息 。 | 
次 提示 : location 对 象 的 属性 都 是 可 读 可 写 的 ， 如 果 改 变 了 文档 的 location href 属性 值 ， 则 浏览 器 | 
就 会 载 入 新 的 页 面 。 如 果 改 变 了 location hash 属性 值 ， 则 页 面 会 跳 转 到 新 的 锚 点 (<a | 
Dame="anchor"> 或 <element id="anchor"> ) ， 但 此 时 页 面 不 会 重 载 。 | 


location hash = "#top": 

如 果 把 一 个 含有 URL 的 字符 串 赋 给 location 对 象 或 它 的 href 属性 , 浏览 器 就 会 把 新 的 URL 所 指 
的 文档 装载 进来 ， 并 显示 出 来 。 

location = "http:// www.mysite.cn/navi/™; // 页 面 会 自动 跳 转 到 对 应 的 网 页 

location href= "http:// www.mysite.cn/"; // 页 面 会 自动 跳 转 到 对 应 的 网 页 

除了 设置 location 对象 的 href 属性 外 ,还 可 以 修改 部 分 URL 信息 , 用 户 只 需要 给 location 对 象 的 
其 他 属性 赋值 即 可 。 这 时 会 创建 一 个 新 的 URL， 浏 览 器 会 将 它 装载 并 显示 出 来 。 

如 果 需 要 URL 其 他 信息 ， 只 能 通过 字符 串 处 理 方法 截取 。 例 如 ， 如 果 要 获取 网 页 的 名 称 ， 可 以 
这 样 设计 。 

Varp = location.pathname: 

var n= p.substring(p.lastIndexOf("/") + 1); 

如 果 要 获取 文件 扩展 名 ， 也 可 以 如 下 设计 。 

var ¢ =Pp.substring(p.lastIndexOf(".") + 1): 

【拓展 】 

location 对 象 还 定义 了 两 个 方法 : reload0 和 replaceO。 

reload0: 可 以 重新 装载 当前 文档 。 

replace0: 可 以 装载 一 个 新 文档 而 无 须 为 它 创 建 一 个 新 的 历史 记录 。 即 在 浏览 器 的 历史 列表 

中 ,新 文档 将 替换 当前 文档 。 这 样 在 浏览 器 中 就 不 能 够 通过 “返回 ”按钮 返回 当前 文档 。 

对 那些 使 用 了 框架 并 且 显 示 多 个 临时 页 的 网 站 来 说 ，replace() 方 法 比较 有 用 。 这 样 临时 页 面 都 不 

被 存储 在 历史 列表 中 。 


< 人 注意 : window .location 与 document.location 不 同 ， 前 者 引用 location 对 象 ， 后 者 只 是 一 个 只 读 字 
符 串 ， 与 document.URL 同 义 。 但是， 当 存 在 服务 器 重 定向 时 ，document.location 包含 的 
是 已 经 装载 的 URL， 而 location.href 包含 的 则 是 原始 请 求 的 文档 的 URL。 


11.4 history 对 象 


浏览 器 窗口 有 一 个 history 对 象 ， 用 来 保存 浏览 历史 。 如 果 当 前 窗口 先后 访问 了 3 个 网 址 ， 那 么 
history 对 象 就 包括 三 项 ，history.length 属性 等 于 3。 例 如 : 


Tistorylength 13 
history 对 象 提供 了 一 系列 方法 ， 人 允许 在 浏览 历史 之 间 移 动 。 具 体 说 明 如 下 。 
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backO: 移动 到 上 一 个 访问 页 面 ， 等 同 于 浏览 器 的 后 退 键 。 
forward0: 移动 到 下 一 个 访问 页 面 ， 等 同 于 浏览 器 的 前 进 键 。 
go0: 接受 一 个 整数 作为 参数 , 移动 到 该 整数 指定 的 页 面 , 如 go(1) 相 当 于 forward0，go(-1) 


仿 站 | 相当 于 backO。 
| history.backO: 
Me 
| history.go(-2); 


如 果 移动 的 位 置 超出 了 访问 历史 的 边界 ， 以 上 3 个 方法 并 不 报错 ， 而 是 默默 的 失败 。 
history go(0) 相 当 于 刷新 当前 页 面 。 例 如 : 

history.go(0): 

常用 的 “返回 上 一 页 ”链接 ， 代 码 如 下 。 
document.getElementById(backLink).onclick = function|O { 

window.history.backO: 


mm 
| 
| 
| 所 注意 :返回 上 一 页 时 ,页 面 通常 是 从 浏览 器 缓存 之 中 加 载 ,而 不 是 重新 要 求 服务 器 发 送 新 的 网 页 。 


11.4.1 实现 无 刷新 浏览 
| HTML5 为 history 对 象 添加 了 两 个 新 方法 , history.pushState() 和 historyreplaceState0, 用 来 在 浏览 
| 历史 中 添加 和 修改 记录 ， 用 法 如 下 。 


if(!!(window.history && history.pushState)) { 
儿 支持 History API 


| 上 面 代码 可 以 用 来 检查 , 当前 浏览 器 是 否 支 持 History API。 如 果 不 支持 的 话 ,可 以 考虑 使 用 Polyfill 
| 库 History.js。 
| 


| 1. history.pushState() 
| history.pushState0 方 法 接受 3 个 参数 ， 依 次 说 明 如 下 。 
| state: 一 个 与 指定 网 址 相关 的 状态 对 象 ，popstate 事件 触发 时 ， 该 对 象 会 传 入 回调 函数 。 如 
| 果 不 需要 这 个 对 象 ， 此 处 可 以 填 null。 
title: 新 页 面 的 标题 ， 但 是 所 有 浏览 器 目前 都 忽略 这 个 值 ， 因 此 这 里 可 以 填 pull。 
回 url: 新 的 网 址 ， 必 须 与 当前 页 面 处 在 同一 个 域 。 浏 览 器 的 地 址 栏 将 显示 这 个 网 址 。 
例如 ， 当 前 网 址 是 example.com/1.html， 使 用 pushState0 方 法 在 浏览 记录 (history 对 象 ) 中 添加 
一 个 新 记录 。 
Var stateObj = {foo0: bar}: 
historypushState(stateObj. page 2 '2.html’): 
| 添加 上 面 这 个 新 记录 后 ,浏览 器 地 址 栏 立刻 显示 example.com/2.html， 但 并 不 会 跳 转 到 2.html， 
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甚至 也 不 会 检查 2.html 是 否 存 在 , 它 只 是 成 为 浏览 历史 中 的 最 新 记录 。 这 时 ， 在 地 址 栏 输入 一 个 新 的 | 
地 址 ， 如 访问 google.com， 然 后 单 击 倒 退 按钮 ， 页 面 的 URL 将 显示 2.html; 再 单 击 一 次 倒退 按钮 ， | 
URL 将 显示 1.html。 | 
总 之 ，pushState0 方 法 不 会 触发 页 面 刷新 ， 只 是 导致 history 对 象 发 生变 化 ， 地 址 栏 会 有 反应 。 | 会 内 
如 果 pushState 的 url 参数 设置 了 一 个 新 的 锚 点 值 〈 即 hash)， 并 不 会 触发 hashchange 事件 。 如 果 | 安 一 


设置 了 一 个 跨 域 网 址 ， 则 会 报错 。 例 如 : | Note 


// 报错 
history.pushState(null. null, ‘https:// twitter.com/hello’); | 
在 上 面 代 码 中 ，pushState0 想 要 插入 一 个 跨 域 的 网 址 ， 导 致 报错 。 这 样 设计 的 目的 是 ， 防 止 恶意 | 
代码 让 用 户 以 为 他 们 是 在 另 一 个 网 站 上 。 | 
2. history.replaceState() | 
historyreplaceState() 方 法 的 参数 与 pushState0 方 法 一 模 一 样 ， 区 别 是 它 修改 浏览 历史 中 当前 纪录 。 
例如 ， 当 前 网 页 是 example.com/example.html。 
history.pushState( {page: 1}, "title 1 ?page=1"); 


history.pushState( {page: 2}, "title 2', ?page=2"):; 
history.replaceState( {page: 3}, ‘title 3', ?page=3"); 


history.backO Wurl 显示 为 http:// example.conmyexample.html?page=1 
history.backO Wurl 显示 为 http:// example.com/example.html 
history.go(2) Wurl 显示 为 http:// example.conyexample.html?page=3 


3. history.state 属性 
history.state 属性 返回 当前 页 面 的 state 对 象 。 例 如 : 


history.pushState( {page: 1}, ‘title 1', ?page=1"); 
history.state // {page: 1} 


4. popstate 事件 
每 当 同一 个 文档 的 浏览 历史 (history 对 象 》 出 现 变 化 时 ， 就 会 触发 popstate 事件 。 


< 所 注意 : 仅仅 调用 pushState() 方 法 或 replaceState0 方 法 ， 并 不 会 触发 该 事件 ， 只 有 用 户 单 击 浏览 器 
倒退 按钮 和 前 进 按钮 ， 或 者 使 用 JavaScript 调用 back、forward、go 方法 时 才 会 触发 。 另 | 

外 ， 该 事件 只 针对 同一 个 文档 ， 如 果 通过 “浏览 历史 列表 ”的 信息 来 加 载 不 同 的 文档 ， 该 | 

事件 也 不 会 触发 。 | 

| 


使 用 时 ， 可 以 为 popstate 事件 指定 回调 函数 。 例 如 : 


window.onpopstate = function(event) { 
console.log('location: ' + document.location): 
console.log('state: ' + JSON .stringify(event. state)): 

下 

1/ 或 者 

window.addEventListener(popstate' function(event) { 
console.log(location: ' + document.location): 
console.log('state: ' + JSON.stringify(event.state)): 

2 


"309。 


区 网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版 ) 


| 回调 函数 的 参数 是 一 个 event 事件 对 象 ， 它 的 state 属性 指向 pushState0 和 replaceState0 方 法 为 当 
| 前 URL 所 提供 的 状态 对 象 , 即 这 两 个 方法 的 第 一 个 参数 .在 上 面 代码 中 event.state 就 是 通过 pushState() 
| 和 replaceState() 方 法 ,为 当前 URL 绑 定 的 state 对 象 。 这 个 state 对 象 也 可 以 直接 通过 history 对 象 


| 站 取 。 
| Var currentState = history.state; 


| 4 狼 注意 : 页 面 第 一 次 加 载 时 ， 浏 览 器 不 会 触发 popstate 事件 。 


5. URLSearchParams API 
URLSearchParams API 用 于 处 理 URL 中 的 查询 字符 串 ， 即 问号 之 后 的 部 分 。 没 有 部 署 这 个 API 
的 浏览 器 ， 可 以 用 url-search-params 这 个 垫 片 库 。 例 如 : 
var paramsString = 'q=URLUItils.searchParams&topic=api'’; 
Var searchParams = new URLSearchParams(paramsString); 
URLSearchParams 有 以 下 方法 ， 用 来 操作 某 个 参数 。 
has0: 返回 一 个 布尔 值 ， 表 示 是 否 具有 某 个 参数 。 
get0: 返回 指定 参数 的 第 一 个 值 。 
getAll0: 返回 一 个 数组 ， 成 员 是 指定 参数 的 所 有 值 。 
set0: 设置 指定 参数 。 
delete(): 删除 指定 参数 。 
append(0): 在 查询 字符 串 之 中 ， 追 加 一 个 键 值 对 。 
toString0: 返回 整个 查询 字符 串 。 
如 : 
| var paramsString = 'q=URLUItils.searchParamsé&topic=api'; 
| Var searchParams = new URLS' tring); 
| 


earchParams(paramsS; 
searchParams.has('topic’) // 返回 值 为 true 


避 办 办 办 办 办 


searchParams.get('topic'’) // 返回 值 为 "api" 
searchParams.getAll('topic'’) / 返回 值 为 ["api"] 
searchParams.get(foo) // 返回 值 为 null， 注 意 Firefox 返回 空 字符 串 
| searchParams.set('foo', 2): 
| searchParams.get('foo') / 返回 值 为 2 
| searchParams.append('topic', ‘webdev’): 
searchParams.toString() // 返回 值 为 "q=URLUrtils.searchParams&topic=api&foo=2&topic=webdev" 
searchParams.append('foo'. 3): 
| searchParams.getAll(foo) // 返回 值 [2. 3] 
| SearchParams.delete(topic)): 
| searchParams.toString() / 返回 值 "q-=URLUtils.searchParams&foo=2&foo=3" 


URLSearchParams 还 有 3 个 方法 ， 用 来 遍历 所 有 参数 。 
加 ”keys0: 遍历 所 有 参数 名 。 

| values(): 遍历 所 有 参数 值 。 

| entries(): 遍历 所 有 参数 的 键 值 对 。 

| 上 面 3 个 方法 返回 的 都 是 Iterator 对 象 。 例 如 : 


| Var searchParams = new URLSearchParams(keyl=valuel &key2=value2"): 
| for (var key of searchParams keysO) { 
| console .log(key): 
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} | 

| 

// keyl | 
/key2 | 
for (var value of searchParams.valuesO) { ! 

consolelog(value): ! 次 

} 又 J 


// valuel 
/value? Er 
for (var pair of searchParams.entriesO) { 
console.log(pair[0]+ ", "+ pair[1]): 
} 
/keyl, valuel 
// key2, value2 
在 Chrome 浏览 器 中 ,URLSearchParams 实例 本 身 就 是 Iterator 对 象 , 与 entries0 方 法 返回 值 相同 。 
所 以 ， 可 以 写成 下 面 的 样子 。 
for (var p of searchParams) { 
console.log(p); | 
} | 
下 面 是 一 个 普 换 当前 URL 的 示例 。 
//! URL: https:// example.com?version=1.0 
Var params = new URLSearchParams(location.search.slice(1)): 
params.set('version', 2.0); 
‘window.history.replaceState({}. ". *$ {location.pathname}?$ {params} ):; 
// URL: https:// example.com?version=2.0 


URLSearchParams 实例 可 以 当 作 POST 数据 发 送 ， 所 有 数据 都 会 URL 编码 。 例 如 : 


let params = new URLSearchParams(): 

params.append(api_ key,'1234567890): 

fetch('https:// example.comyapi、{ 
method: POST' 


body: params 
))thenC ) 
DOM 的 a 元素 节点 的 searchParams 属性 ， 就 是 一 个 URLSearchParams 实例 。 例 如 : 


Vara= document.createElement(a): 
ahref = ‘https:// example.com?filter=api’; 
a.searchParams.get('filter’) / "api" 


URLSearchParams 还 可 以 与 URL 接口 结合 使 用 。 例 如 : 


var url = new URL(location): 
Var foo = url.searchParams.get('foo') || 'somedefault': 


.4.2 设计 导航 页 面 


本 例 设计 一 个 无 刷新 页 面 导航 ， 在 首页 (index.html) 包含 一 个 导航 列表 ， 当 用 户 单 击 不 同 的 列 
表 项 目 时 ， 首 页 (index.html) 的 内 容 容器 (<div id="content">) 会 自动 更 新 内 容 ， 正 确 显示 对 应 目标 
页 面 的 HTML 内 容 ， 同 时 浏览 器 地 址 栏 正 确 显示 目标 页 面 的 URL， 但 是 首页 并 没有 被 刷新 ， 而 不 是 
仅 显 示 目 标 页 面 ， 演 示 效 果 如 图 11.1 所 示 。 


1 


wh 


“3 


History API 示 例 


: 包 。 


当前 内 容 页 :news. html 


(b) 显示 news.html 页 面 
图 11.1 应 用 History API 


(a) 显示 index.html 页 面 


， 妇 上 辐 读 ”具体 操作 步 又 请 扫 码 学 习 。 
| 11.4.3 ”设计 无 刷新 网 站 

本 例 设 计 一 个 简单 的 网 站 ， 当 用 户 选择 一 个 图 片 时 ,在 下 方 将 显示 该 技术 对 应 的 文字 描述 ， 同 时 
高 亮 显示 该 图 片 ， 提 示 被 选中 状态 。 当 在 浏览 器 工具 栏 中 单 击 “ 后 退 ” 按 钮 时 ， 页 面 应 该 切换 到 上 一 


个 被 选中 的 图 片 状态 ， 同 时 图 片 下 方 的 文字 也 要 一 并 切换 ， 当 单 击 “ 前 进 ” 按 钮 时 执行 类 似 的 响应 操 
作 ， 演 示 效 果 如 图 11.2 所 示 。 


(a) 网 站 首页 默认 效果 (b) 显示 火药 技术 视图 效果 
图 11.2 设计 主题 宣传 网 站 


线 上 阅读 “具体 操作 步骤 请 扫 码 学 习 。 
11.4.4 ”设计 无 刷新 灯箱 广告 

本 例 设计 一 个 简单 的 灯箱 广告 ， 它 使 用 History API 展示 了 一 个 图 片 预览 模式 ， 一 个 具有 相关 性 
| 的 图 片 无 刷新 访问 。 在 支持 的 浏览 器 中 浏览 ， 单 击 下 一 张 图 片 画廊 的 链接 将 更 新 照片 和 URL 地 址 ， 


| 没有 引发 全 页 面 刷新 。 在 不 支持 的 浏览 器 中 ， 或 者 当 用 户 禁 用 了 脚本 时 ， 导 航 链接 只 是 作为 普通 链 
接 ， 会 打开 一 个 新 的 页 面 ， 整 页 刷新 ， 整 个 示例 演示 效果 如 图 11.3 所 示 。 


(a) 上 一 张 (b) 下 一 张 
站 图 11.3 无 刷新 图 片 画廊 演示 效果 
」 线 上 阅读 具体 操作 步骤 请 扫 码 学 习 。 


人 
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11.4.5 设计 可 后 退 画板 


本 例 利 用 History API 的 状态 对 象 ， 实 时 记录 用 户 的 每 一 次 操作 ， 把 每 一 次 操作 信息 传递 给 浏览 | 
器 的 历史 记录 保存 起 来 ， 这 样 当 用 户 单 击 浏览 器 的 “后 退 ” 按 钮 时 ， 会 逐步 恢复 前 面 的 操作 状态 , 从 | 
而 实现 历史 恢复 功能 ， 演 示 效 果 如 图 11.4 所 示 。 


(a) 绘制 文字 (b) 恢复 前 面 的 绘制 
图 11.4 设计 历史 恢复 效果 
在 示例 页 面 中 显示 一 个 canvas 元 素 ， 用 户 可 以 在 该 canvas 元 素 中 随意 使 用 鼠标 绘画 ， 当 用 户 单 | 
击 一 次 或 连续 单 击 浏览 器 的 后 退 按钮 时 ， 可 以 撤销 当前 绘制 的 最 后 一 笔 或 多 笔 ， 当 用 户 单 击 一 次 或 连 | 攻 
续 单 击 浏览 器 的 前 进 按钮 时 ， 可 以 重 绘 当前 书写 或 绘制 的 最 后 一 笔 或 多 笔 。 
具体 操作 步骤 请 扫 码 学 习 。 


11.5 screen 对 象 


使 用 window.screen 可 以 访问 screen 对 象 ， 该 对 象 包含 了 显示 设备 的 信息 ， 具 体 说 明 如 表 11.3 所 
示 。 这 些 信息 可 以 用 来 探测 客户 端 硬件 的 基本 配置 。 利 用 screen 对 象 可 以 优化 程序 的 设计 , 满足 不 同 
用 户 的 显示 要 求 。 


表 11.3 screen 对 象 属性 


返回 显示 屏幕 的 高 度 〈 除 Windows 任务 栏 之 外 ) | 

返回 显示 屏幕 的 宽度 〔 除 Windows 任务 栏 之 外 ) | 

设 | 
colorDepth 返回 目标 设备 或 缓冲 器 上 的 调 色 板 的 比特 深度 | 
deviceXDPI 返回 显示 屏幕 的 每 英寸 水 平 点 数 | 
deviceYDPI 返回 显示 屏幕 的 每 英寸 垂直 点 数 | 
fontSmoothingEnabled 返回 用 户 是 否 在 显示 控制 面板 中 启用 了 字体 平滑 | 
height 返回 显示 屏幕 的 高 度 | 
logicalXDPI 返回 显示 屏幕 每 英寸 的 水 平方 向 的 常规 点 数 | 
logicalYDPI 返回 显示 屏幕 每 英寸 的 垂直 方向 的 常规 点 数 | 
pixelDepth 返回 显示 屏幕 的 颜色 分 辨 素 比特 每 像素 ) | 
updateInterval 设置 或 返回 屏幕 的 刷新 率 | 
width 返回 显示 器 屏幕 的 宽度 [ 
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【示例 1】screen.height 和 screen.width 两 个 属性 ， 一 般 用 来 了 解 设 备 的 分 辩 率 。 
| 
| 显示 设备 的 高 度 ， 单 位 为 像素 
| 


| Screen .height /1920 
全 | / 显示 设备 的 宽度 ， 单 位 为 像素 
~ 一 | screen.width // 1080 


上 面 代码 显示 ， 某 设备 的 分 辩 率 是 1920 像素 X1080 像素 。 
| 除非 调整 显示 器 的 分 辨 率 ， 否 则 这 两 个 值 可 以 看 作 常 量 ， 不 会 发 生变 化 。 显 示 器 的 分 辩 率 与 浏览 
| 器 设置 无 关 ， 缩 放 网 页 并 不 会 改变 分 辩 率 。 
| 【示例 2】 下 面 是 根据 屏幕 分 辨 率 ， 将 用 户 导 向 不 同 网 页 的 代码 。 
| Fav 0 ce a 
| window.location.replace('small.html’); 
要 
windowlocation replace(wide html): 
} 
| screen.availHeight 和 screen.availWidth 属性 返回 屏幕 可 用 的 高 度 和 宽度 ， 单 位 为 像素 。 它 们 的 值 
| 为 屏幕 的 实际 大 小 减 去 操作 系统 某 些 功能 占据 的 空间 ， 如 系统 的 任务 栏 。 
| screen.colorDepth 属性 返回 屏幕 的 颜色 深度 ， 一 般 为 16 (表示 16-bit) 或 24 (表示 24-bit)， 用 户 
| 可 以 根据 显示 器 的 颜色 深度 选择 使 用 16 位 图 像 或 8 位 图 像 。 
| 【示例 3】 下 面 示例 演示 了 如 何 让 弹出 的 窗口 居中 显示 。 


| fanction center(ur)) { / 窗口 居中 处 理 函数 

| Var W= screen.avail Width / 2: / 获取 客户 端 屏幕 的 宽度 一 半 
| varh = screen.availHeight/2; 1/ 获取 客户 端 屏幕 的 高 度 一 半 
| vart= (screen.availHeight - hb)/2: / 计算 居中 显示 时 顶部 坐标 

| var1= (screen.avail Width - w)/2: // 计算 居中 显示 时 左 侧 坐标 


varp="top=" +t+",left=" +1+",width=" + w+",height=" +h; 

/ 设计 坐标 参数 字符 串 
Var win = window.open(url."url".p): / 打开 指定 的 窗口 ， 并 传递 参数 
Win .focus0): // 获取 窗口 焦点 


) 
center("https:// www baidu.comy/"): / 调用 该 函数 


| 虽然 使 用 sereen 对 象 的 width 和 height 属性 可 以 实现 ， 但 是 不 同 浏览 器 在 解析 时 会 存在 一 定 的 
| 


11.6 ” document 对 象 


| 在 浏览 器 窗口 中 , 每 个 window 对 象 都 会 包含 一 个 document 属性 , 该 属性 引用 窗口 中 显示 HTML 
| 文档 的 document 对 象 。document 对 象 与 它 所 包含 的 各 种 节点 〈 如 表单 、 图 像 和 链接 ) 构成 了 文档 对 
| 象 模 型 ， 如 图 11.4 所 示 。 
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11.6.1 document 对 象 属性 


浏览 器 在 加 载 文 档 时 ， 会 自动 构建 文档 对 象 模型 ， 把 文档 中 同类 元 素 对 象 映射 到 一 个 集合 中 然 | 
后 以 document 对 象 属性 的 形式 允许 用 户 访问 ， 如 图 11.5 所 示 。 | 


elements[] 
forms[] 表单 元 素 
Form 对 象 数组 至 


Button 


Anchor 对 象 数组 FileUpload 


Hidden 


了 Password 


document 
Document 对 象 


applets[] 
applet 数组 
embeds[] options[] 
嵌入 对 象 数组 Option 对 象 数组 


1.5 文档 对 象 模型 


< 所 注意 ; 本 节 所 谓 的 文档 对 象 模型 与 第 12 章 介绍 的 DOM 文档 对 象 模型 是 两 个 不 同 概念 ， 本 节 文 
档 对 象 模 型 是 早期 的 、 非 标准 的 、 但 被 浏览 器 广泛 支持 的 文档 结构 访问 方式 。 而 第 12 章 
介绍 的 DOM 是 W3C 组 织 制订 的 , 标准 化 的 文档 结构 模型 , 也 获得 了 浏览 器 的 广泛 支持 。 
二 者 共同 存在 于 浏览 器 中 ， 并 存在 部 分 功能 重合 的 现象 。 

这 些 集合 都 是 HTMLCollection 对 象 ， 为 访问 文档 常用 对 象 提供 了 快捷 方式 ， 简 单 说 明 如 下 。 
document.anchors: 返回 文档 中 所 有 Anchor 对 象 ， 即 所 有 带 name 特性 的 <a> 标 签 。 
document.applets: 返回 文档 中 所 有 Applet 对 象 ， 即 所 有 <applet> 标 签 ， 不 再 推荐 使 用 。 
document.forms: 返回 文档 中 所 有 Form 对 象 ， 与 document.getElementsByTagName("form") 


得 到 的 结果 相同 。 
document.images: 返回 文档 中 所 有 Image 对 象 , 与 document.getElementsByTagName("img") 
得 到 的 结果 相同 。 


document.links: 返回 文档 中 所 有 Area 和 Link 对 象 ， 即 所 有 带 href 特性 的 <a> 标 签 。 

如 果 与 Form 对 象 、Image 对 象 或 Applet 对 象 对 应 的 HTML 标签 中 设置 了 name 属性 ， 那 么 还 可 
以 使 用 name 属性 值 引用 这 些 对 象 。 浏 览 器 在 解析 文档 时 ， 会 自动 把 这 些 元 素 的 name 属性 值 定义 为 
document 对 象 的 属性 名 ， 用 来 引用 相应 的 对 象 。 该 方法 仅 适用 上 述 3 种 元 素 对 象 ， 其 他 元 素 对 象 需 
要 使 用 数组 元 素来 访问 。 

【示例 1】 下 面 示例 使 用 name 访问 文档 元 素 。 


<img name="imge" src= "bg.gif' /> 
<form name="form" method="post" action="http:// www.mysite.cn/navi/"> 
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</form> 
| <script> 
| alert(documentimg .src): // 返回 图 像 的 地 址 
| alert(document.form.action): / 返回 表单 提交 的 路 径 
【示例 2】 使 用 文档 对 象 集合 可 以 快速 索引 ， 此 时 不 需要 name 属性 。 


| <img src = "bg.gif' /> 
| <form method="post" action= "http:// www.mysite.cn/navi/"> 


| </form> 

| <script> 

alert(document images[O].sre): // 返回 图 像 的 地 址 

| alert(document forms[0].action): // 返回 表单 提交 的 路 径 
| /scrip> 


【示例 3】 如 果 元 素 对 象 定义 有 name 属性 ， 也 可 以 使 用 文本 下 标 来 引用 对 应 的 元 素 对 象 。 


<img name="img" src = "bg.gif' /> 

<form name="form" method="post" action="http:// www.mysite.cn/navi/"> 
</form> 

<script> 

alert(document.images["img"].sre); / 返回 图 像 的 地 址 
alert(document.forms["form"].action); / 返回 表单 提交 的 路 径 
</script> 


.6.2 ” document 对 象 方法 


使 用 document 对 象 的 write0 和 writeln0 方 法 可 以 动态 生成 文档 内 容 。 包 括 两 种 方式 。 
在 浏览 器 解析 时 动态 输出 信息 。 
在 调用 事件 处 理 函 数 时 使 用 write0 或 writeln0 方 法 生成 文档 内 容 。 
write0 方 法 可 以 支持 多 个 参数 ， 当 为 它 传递 多 个 参数 时 ， 这 些 参 数 将 被 依次 写 入 文档 。 
| 【示例 1】 使 用 write0 方 法 生成 文档 内 容 。 
| document write(Hello wwWorldy; 
| 实际 上 ， 上 面 代码 与 下 面 的 用 法 相同 。 
document.write('Hello, World"): 
| writeln() 方 法 与 write( 方 法 完全 相同 ， 只 不 过 在 输出 参数 之 后 附加 一 个 换行 符 。 由 于 HTML 忽略 
| 换行 符 ， 所 以 很 少 使 用 该 方法 ， 不 过 在 非 HTML 文档 输出 时 使 用 会 比较 方便 。 
| 【示例 2】 下 面 示例 演示 了 write0 和 writeln0 方 法 的 混合 使 用 。 


function {0 { 
document.write(<p> 调 用 事件 处 理 函 数 时 动态 生成 的 内 容 </p>"): 


| 
| 
| 国 酸 
document write(<p onclicls-"fO"> 文 档 解析 时 动态 生成 的 内 容 </p>y: 
| 在 页 面 初始 化 后 ， 文 档 中 显示 文本 为 “文档 解析 时 动态 生成 的 内 容 ”， 而 一 旦 单 击 该 文本 后 ， 则 
”write0 方 法 动态 输出 文本 为 “调用 事件 处 理 函数 时 动态 生成 的 内 容 ”, 并 覆盖 原来 文档 中 显示 的 内 容 。 
| 
| 
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< 负 注意 : 只 能 在 当前 文档 正在 解析 时 使 用 write() 方 法 在 文档 中 输出 HTML 代码 ， 即 在 <script> 标 签 
中 调用 write 方法 ， 因 为 这 些 脚 本 的 执行 是 文档 解析 的 一 部 分 。 如 果 从 事件 处 理 函 数 中 调 
用 write0 方 法 ,那么 write() 方 法 动态 输出 的 结果 将 会 覆盖 当前 文档 ， 包 括 它 的 事件 处 理 函 | 
数 ， 而 不 是 将 文本 添加 到 其 中 。 所 以 ， 在 使 用 时 一 定 要 小 心 ， 不 可 以 在 事件 处 理 函数 中 包 | 
含 write0 或 writeln0 方 法 。 
【示例 3】 使 用 open( 方 法 可 以 为 某 个 框架 创建 文档 ， 也 可 以 使 用 write0 方 法 为 其 添加 内 容 。 在 
下 面 框架 集 文档 中 。 左 侧 框架 的 文档 为 left1.htm， 而 右 侧 框架 还 没有 文档 内 容 。 
<!IDOCTY?PE html PUBLIC "-// W3C// DTD XHTML 1.0 Frameset// EN" 
"http:// www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> 
<html xmlns="http:// www.w3.org/1999/xhtml"> 
<head> 


</head> 
<frameset cols="*,*"> 


<frame src="leftl .htm" name="leftFrame" id="leftFrame" /> 
<frame src="" name="mainFrame" id="mainFrame" /> 
</frameset> 
<noframes><body></body></noframes> 
<html> 


然后 ， 在 左 侧 框架 文档 中 定义 如 下 脚本 。 


windowonload = functionO { 
document.body.onclick = 


h 

function {0 { 
parent.frames[1].document.open(): 
Parent frames[1].document .write('<h2> 动 态 生成 右 侧 框架 的 标题 <h2>) 
parent.frames[1].document.closeO: 


} 
首先 调用 document 对 象 的 open0 方 法 创建 一 个 文档 ， 然 后 调用 write0 方 法 在 文档 中 写 入 内 容 ， 
最 后 调用 document 对 象 的 方法 close0 结 束 创建 过 程 。 这 样 在 框架 页 的 左 侧 框架 文档 中 单 击 时 ， 浏 览 
器 会 自动 在 右 侧 框架 中 新 创建 一 个 文档 ， 并 生成 一 个 二 级 标题 信息 。 
所 注意 : 使 用 openO 后 ， 一 定 要 注意 调用 close( 方 法 关闭 文档 ， 只 有 在 关闭 文档 时 ， 浏 览 器 才 输 出 
显示 缓存 信息 。 


117 案例 实战 


本 节 将 结合 框架 和 浏览 器 检测 技术 介绍 几 个 实战 案例 。 
11.7.1 使 用 远程 脚本 
| 回 
远程 脚本 (Remote Scripting) 就 是 远程 函数 调用 ， 通 过 远程 函数 调用 实现 异步 通信 。 所 谓 异步 通 | 视频 讲 名 


= 
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信 ， 就 是 在 不 刷新 页 面 的 情况 下 ， 人 允许 客户 端 与 服务 器 端 进行 非 连续 的 通信 。 这 样 用 户 不 需要 等 待 ， 
网 页 浏览 与 信息 交互 互 不 干扰 ， 信 息 传输 不 用 再 传输 完整 页 面 。 
远程 脚本 的 设计 思路 : 创建 一 个 隐藏 框架 ， 使 用 它 载 入 服务 器 端 指 定 的 文件 ， 此 时 被 载 入 的 服务 
食 生 | 器 端 文件 所 包含 的 远程 脚本 〈JavaScript 代码 ) 就 被 激活 ， 被 激活 的 脚本 把 服务 器 端 需要 传递 的 信息 
通过 框架 页 加 载 响应 给 客户 端 ， 从 而 实现 客户 端 与 服务 器 异步 通信 的 目的 。 


| 容 提示 : 所 谓 隐藏 框架 ， 就 是 设置 框架 高 度 为 0， 以 达到 隐藏 显示 的 目的 。 隐 藏 框架 常用 来 加 载 一 
| 些 外 部 链接 和 导入 一 些 扩展 服务 ， 其 中 使 用 最 多 的 就 是 隐藏 框架 导入 广告 页 。 


下 面 示例 演示 如 何 使 用 框架 集 实现 异步 通信 的 目的 。 为 了 方便 读者 能 直观 了 解 远程 交互 的 过 程 ， 
本 例 暂 时 显示 隐藏 框架 。 

【操作 步骤 】 

(1) 新 建 一 个 简单 的 框架 集 (index.htm)， 其 中 第 一 个 框架 默认 加 载 页 面 为 客户 交互 页 面 ,第 二 
个 框架 加 载 的 页 面 是 一 个 空白 页 。 


<html> 

<head> 

<title></title> 

</head> 

<frameset rows="50%,50%"> 

| <frame src= main htm" name="main" /> 

| <frame src="blackhtm" name="server" /> 
| </frameset> 

</html> 


(2) 设计 空白 页 (blackhtm) 页 面 的 代码 如 下 。 
| <html> 
| 


<head> 
<title> 空 白 页 </title> 
</head> 
dy 
| <h1> 空 白 页 </hl> 
| </body> 
| </html> 


| (3) 在 客户 交互 页 面 (mainhtm) 中 定义 一 个 简单 的 交互 按钮 ， 当 单 击 该 按钮 时 将 为 底部 框架 
| 加 载 服务 器 端的 请 求 页 面 (serverhtm )。 
| <hm> 


<head> 

<title> 与 客户 交互 页 面 <title> 

<script> 

function requestO { // 请 求 函数 ， 加 载 服务 器 端 页 面 
parent.frames[1].location.href = "server.htm": 

windowonload= function0{ 人 页 面 加 载 完毕 ， 为 按钮 绑 定 事件 处 理 函数 
varb= document.getElementsByTagName("input")[0]: 

| b.onclick = request: 
| 上 
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</script> 
</head> 


<body> 

<h1> 与 客户 交互 页 面 <hl> 

<input name="submit' type="button" id="submit" value=" 向 服务 器 发 出 请 求 " 户 
</body> 

<html> 


(4) 在 服务 器 响应 页 面 (server.htm) 中 利用 JavaScript 脚本 动态 改变 客户 交互 页 面 的 显示 信息 。 
<html> 


<head> 
<title> 服 务 器 端 响应 页 面 </title> 
<script> 
window.onload = function() { 
// 当 该 页 面 被 激活 并 加 载 完毕 后 ， 动 态 改变 客户 交互 页 面 的 显示 信息 
parent.frames[0].document.write("<h1>Hi， 大 家 好 ， 我 是 从 服务 器 端 过 来 的 信息 使 者 </h1>"); 
上 | 
script> | 
</head> | 


<body> 
<h1> 服 务 器 端 响应 页 面 </h1> 


</body> 
</html> 


(5) 在 浏览 器 中 预览 index.htm， 就 可 以 看 到 如 图 11.6 所 示 的 演示 效果 。 


oD Er 站 
与 客户 交互 页 面 站 大 家 好 ， 各 站 从 服务 员 过 
LEELET ED 来 的 信息 使 者 


空白 页 服务 器 端 响 应 页 面 


(a) 响应 前 (b) 响应 后 
图 11.6 异步 交互 通信 演示 效果 


11.7.2 ”设计 远程 交互 
隐藏 框架 只 是 异步 交互 的 载体 , 它 仅 负责 信息 的 传输 , 而 交互 的 核心 是 应 该 有 一 种 信息 处 理 机 制 ， 
这 种 处 理 机 制 就 是 回调 函数 。 
安 提示 : 所 谓 回调 函数 ， 就 是 客户 端 页 面 中 的 一 个 普通 函数 ， 但 是 该 函数 是 在 服务 器 端 被 调用 ， 并 
负责 处 理 服务 器 端 响应 的 信息 。 


在 异步 交互 过 程 中 ,经 常 需要 信息 的 双向 交互 ， 而 不 仅仅 是 接受 服务 器 端的 信息 。 下 面 示例 演示 
如 何 把 客户 端的 信息 传递 给 服务 器 端 , 同时 让 服务 器 准确 接收 客户 端 信息 。 本 例 初 步 展现 了 异步 交互 


| 
| 
| 
| 
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中 请 求 和 响应 的 完整 过 程 ， 其 中 回调 函数 的 处 理 又 是 整个 案例 的 焦点 。 

【操作 步骤 】 

(1) 模仿 11.7.1 节 示 例 构 建 一 个 框架 集 (index.htm)， 代 码 如 下 。 


<frame src="main.htm" name="main" /> 

<frame src="black.htm" name="server" /> 
</frameset> 
<noframes> 你 的 浏览 器 不 支持 框架 集 ， 请 升级 浏览 器 版 本 ! </noframes> 
</html> 


| 本 文档 框架 集 由 上 下 两 个 框架 组 成 ， 第 二 个 框架 高 度 为 0， 但 是 不 要 设置 为 0 像素 高 ， 因 为 在 一 
| 些 老 版 本 的 浏览 器 中 会 依然 显示 。 这 两 个 框架 的 分 工 如 下 。 

框架 1 (main) ， 负 责 与 用 户 进行 信息 交互 。 

框架 2 (server) ， 负 责 与 服务 器 进行 信息 交互 。 

考虑 到 老 版 本 浏览 器 可 能 不 支持 框架 集 , 可 以 使 用 <noframes> 标 签 进行 兼容 , 使 用 户 体验 更 友好 。 

(2) 在 默认 状态 下 ， 框 架 集中 第 二 个 框架 加 载 一 个 空白 页 面 (black.htm)， 第 一 个 框架 中 加 载 与 
客户 进行 交互 的 页 面 (main.htm)。 

第 一 个 框架 中 主要 包含 两 个 函数 : 一 个 是 响应 用 户 操作 的 回调 函数 ， 另 一 个 是 向 服务 器 发 送 请 求 
的 事件 处 理 函 数 。 

<html> 


<head> 
<title> 与 客户 交互 页 面 </title> 
<script> 
function request| { // 向 服务 器 发 送 请 求 的 异步 请 求 函数 
var user = document.getElementById("user"); / 获取 输入 的 用 户 名 
Var pass = document.getElementById("pass"): // 获取 输入 密码 
| vars= "User=" + user.Value + "&pass=" + passvalue: // 构造 查询 字符 串 
| parent ,frames[1] location href= "serverhtm?" + s: ”// 为 框架 集中 第 二 个 框架 加 载 服务 器 端 请 求 文 件 
| // 并 附加 查询 字符 串 
/ 传送 客户 端 信息 ， 以 实现 异步 信息 的 双向 交互 


b 
| function callback(b, n) { / 异步 交互 的 回调 函数 
| ifb) { // 如 果 参 数 b 为 真 ， 说 明 输入 信息 正确 
| Vare= document.getElementsByTagName("body")[0]: 
| / 获取 第 一 个 框架 中 body 元 素 的 引用 指针 
| // 以 实现 向 其 中 插入 信息 
| einnerHTML = "<hl>" +n+"</hl><p> 您 好 ， 欢 迎 登录 站 点 </p>"; 
| // 在 交互 页 面 中 插入 新 的 交互 信息 
| 
| else{ // 如 果 参 数 b 为 假 ， 说 明 输入 信息 不 正确 


alert(" 你 输入 的 用 户 名 或 密码 有 误 ， 请 重新 输入 "): // 提示 重新 输入 信息 
Var user = parent.frames[0].document.getElementById("user"): 
| / 获取 第 一 个 框架 中 的 用 户 名 文本 框 
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var pass = parent.frames[0].document.getElementById("pass"): | 
/ 获取 第 一 个 框架 中 的 密码 文本 框 | 
| 


user.value = ""; // 清空 用 户 名 文本 框 中 的 值 
pass.value = ""; / 清空 密码 文本 框 中 的 值 | 
a | 县 
windowonload = fhnction0 { 。“”// 页 面 初始 化 处 理 函 数 Ezra 
varb = document.getElementById("submit");// 获取 “提交 ”按钮 | 
b.onclick = request: // 绑 定 鼠标 单 击 事件 处 理 函 数 | 
} | 
</script> | 
</head> | 
<body> | 
<h1> 用 户 登 录 </h1> | 


用 户 名 <input name="" id="user" type="text"><br /><br /> 
密 ” 码 <input name="" id="pass" type="password"><br /><br /> | 
<input name="submit" type="button" id="submit" value=" 提 交 " /> | 
<Jbody> | 
</html> | 
由 于 回调 函数 是 在 服务 器 端 文件 中 被 调用 的 , 所 以 对 象 作用 域 的 范围 就 发 生 了 变化 ,此 时 应 该 指 
明 它 的 框架 集 和 框架 名 或 序号 ， 否 则 在 页 面 操 作 中 会 找 不 到 指定 的 元 素 。 
(3) 在 服务 器 端的 文件 中 设计 响应 处 理 函数 ， 该 函数 将 分 解 HTTP 传递 过 来 的 URL 信息 ， 获 取 
查询 字符 串 ， 并 根据 查询 字符 串 中 用 户 名 和 密码 ， 判 断 当前 输入 的 信息 是 否 正确 ， 并 决定 具体 响应 的 
信息 。 


<html> | 
<head> | 
<title> 服 务 器 端 响应 和 处 理 页 面 </title> | 
<script> | 
windowonload = functionO { // 服务 器 响应 处 理 函 数 ， 当 该 页 面 被 请 求 加 载 时 触发 | 
var query = location.search.substring(1); / 获取 HTTP 请 求 的 URL 中 所 包含 的 查询 字符 串 | 
Var a = query.split("&"): // 劈 开 查询 字符 串 为 数组 | 
var 0={}: // 临时 对 象 直接 量 | 
for(vari=0:i<alength: itb{ // 遍历 查询 字符 串 数组 
a // 找到 等 号 的 下 标 位 置 
这 pos 一 ~ 1) continue: // 如 果 没有 等 号 ， 则 忽略 


varname = af[i].substring(0. pos): ”// 获取 等 号 前 面 的 字符 串 
varvalue = a[i].substring(pos + 1): / 获取 等 号 后 面 的 字符 串 
ofname] = unescape(value); / 把 名 / 值 对 传递 给 对 象 


Var nb: 
/ 如 果 用 户 名 存在 ， 且 等 于 "admin"， 则 记录 该 信息 ， 和 否则 设置 为 null 
((of"user"]) && of"user"] — "admin") ? (n = of"user"]) : (n= nul): 
// 如 果 密码 存在 ， 且 等 于 "1234556"， 则 设置 变量 b 为 tue， 否 则 为 false 
((o["pass"]) && of"pass"] — "123456") ? (b = true) : (b = false) : 
/ 调用 客户 端 框架 集中 第 1 个 框架 中 的 回调 函数 ， 并 把 处 理 的 信息 传递 给 它 
parent.frames[0].callback(b, mn): 

有 

</script> 


"i* 


| 

| 

| 
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2 
<h1> 服 务 器 端 响 应 和 处 理 页 面 </h1> 


</body> 
</html> 


在 实际 开发 中 , 服务 器 端 文件 一 般 为 动态 服务 器 类 型 的 文件 ， 并 借助 服务 器 端 脚本 来 获取 用 户 的 
信息 ， 然 后 决定 响应 的 内 容 ， 如 查询 数据 库 ， 返 回 查 询 内 容 等 。 本 示例 以 简化 的 形式 演示 异步 通信 的 


过 程 ， 因 此 没有 采用 服务 器 技术 。 


(4) 预览 框架 集 ， 在 客户 交互 页 面 中 输入 用 户 的 登录 信息 ， 当 向 服务 器 提交 请 求 后 ， 服 务 器 首 


| 先 接收 从 客户 端 传递 过 来 的 信息 , 并 进行 处 理 , 然后 调用 客户 端的 回调 函数 把 处 理 后 的 信息 响应 
示例 演示 效果 如 图 11.7 所 示 。 


| 
| 
| x 
| ©- Shoocaho. -ac| so 


(a) 登录 (b) 错误 提示 (c) 正确 提示 
图 11.7 异步 交互 和 回调 处 理 效果 图 


11.7.3 ”使 用 浮动 框架 


使 用 框架 集 设计 远程 脚本 存在 以 下 缺陷 。 
框架 集 文档 需要 多 个 网 页 文件 配合 使 用 ， 结 构 不 符合 标准 ， 也 不 利于 代码 优化 。 
回 ”框架 集 缺 乏 灵活 性 ， 如 果 完 全 使 用 脚本 控制 异步 请 求 与 交互 ， 不 是 很 方便 。 


器 


和 ET ES 《4 |? [GHEE Ee 


去 ， 


浮动 框架 (iframe 元 素 ) 与 frameset (框架 集 ) 功能 相同 ， 但 是 <iframe> 是 一 个 普通 标签 ， 可 以 


插入 到 页 面 任意 位 置 ， 不 需要 框架 集 管理 ， 也 便于 CSS 样式 和 JavaScript 脚本 控制 。 
【操作 步骤 】 


(1) 在 客户 端 交互 页 面 (main .html) 中 新 建 函 数 hideIframe0， 使 用 该 函数 动态 创建 浮动 框架 ， 


信 取 这 个 浮动 杠 架 实现 与 服务 器 进行 异步 通信 。 有 关 DOM 节点 操作 方法 请 参考 第 12 章 。 


// 创建 浮动 框架 

// 参数 : ul 表示 要 请 求 的 服务 器 端 文件 路 径 

// 返回 值 : 无 

function hideIframe(url) { 
var hideFrame = null: // 定义 浮动 框架 变量 
hideFrame = document.createElement("iframe"):; 。“// 创建 这 ame 元 素 
hideFrame name = "hideFrame": 1/ 设置 名 称 属性 
hideFrame.id = "hideFrame":; 1/ 设置 ID 属性 
hideFrame ,style height = "0px": // 设置 高 度 为 0 
hideFrame .style .width = "0px": // 设置 宽度 为 0 
hideFrame ,style position = "absolute": / 设置 绝对 定位 ， 避 免 浮动 框架 占据 页 面 空间 
hideFrame.style visibility = "hidden": / 设置 隐藏 显示 
document.body.appendChild(hideFrame): / 把 浮动 框架 元 素 插入 body 元 素 中 
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frames["hideFrame"].location href = url: 

}.10) 

| 
当 使 用 DOM 创建 这 ame 元 素 时 ， 应 设置 同名 的 name 和 id 属性 ,因为 不 同类 型 浏览 器 引用 框架 | 
时 会 分 别 使 用 name 或 id 属性 值 。 当 创建 好 这 ame 元 素 后 ， 大 部 分 浏览 器 (如 Mozilla 和 Opera) 会 | 
需要 一 点 时 间 ( 约 为 几 毫秒 ) 来 识别 新 框架 并 将 其 添加 帧 集合 中 ,因此 当 加 载 地址 准备 向 服务 器 进行 
请 求 时 ， 应 该 使 用 setTimeout0 函 数 使 发 送 请 求 的 操作 延迟 10 毫秒 。 这 样 当 执 行 请 求 时 ， 浏 览 器 能 够 
识别 这 些 新 的 框架 ， 避 免 发 生 错误 。 

如 果 页 面 中 需要 多 处 调用 请 求 函数 ， 则 建议 定义 一 个 全 局 变量 ， 专 门 用 来 存储 浮动 框架 对 象 ， 这 
样 就 可 以 避免 每 次 请 求 时 都 创建 新 的 过 ame 对 象 。 

(2) 修改 客户 端 交互 页 面 中 request0 函 数 的 请 求 内 容 ， 直 接 调用 hideIframe0 函 数 ， 并 传递 URL | 
参数 信息 。 | 
function requestO { ”// 异步 请 求 函数 | 

Var user = document.getElementById("user"); / 获取 用 户 名 文本 框 ， 注 意 引 用 路 径 的 不 同 | 
Var pass = document.getElementById("pass"); / 获取 密码 域 ， 注 意 引用 路 径 的 不 同 | 
Var s = "iframe_server.html?user=" + user.value + "&pass=" + pass.Value: 
hideIframe(s): // 调用 函数 创建 浮动 框架 ， 指 定 请 求 的 服务 器 文件 和 传递 的 信息 


浮动 框架 与 框架 集 属 于 不 同 级 别 的 作用 域 ， 浮 动 框架 是 被 包含 在 当前 窗口 中 的 ， 所 以 应 该 使 用 
parent， 而 不 是 parent.frames[0] 来 调用 回调 函数 ， 或 者 在 回调 函数 中 读 取 文 档 中 的 元 素 ( 客 户 端 交互 
页 面 的 详细 代码 请 参阅 这 ame_main.html 文件 )。 

function callback(b, n) { 

ifb && n) { // 如 果 返 回信 息 合法 ， 则 在 页 面 中 显示 新 的 信息 


Var € = document.getElementsByTagName("body")[0]: 
einnerHTML = "<hl>" + n+"</h1><p> 您 好 ， 欢 迎 登录 站 点 </p>"; 


else{ / 否则 ， 提 示 错 误 信息 ， 并 显示 表单 要 求 重新 输入 
alert(" 你 输入 的 用 户 名 或 密码 有 误 ， 请 重新 输入 "): 
var user = parent.document.getElementById("user"):// 获取 文档 中 的 用 户 名 文本 框 
Var pass = parent.document.getElementById("pass"):// 获取 文档 中 的 密码 域 
user.value = / 清空 文本 框 
pass.value = "": / 清空 密码 域 


} 


} 


(3) 在 服务 器 端 响应 页 面 中 也 应 该 修改 引用 客户 端 回 调 函数 的 路 径 〔 服 务 器 端 响 应 页 面 详细 代 | 
码 请 参阅 serverhtml 文件 )， 代 码 如 下 。 


window.onload = fonctiongO { 


parent.callback(b. n): / 注意 引用 路 径 的 变化 


这 样 通过 过 ame 浮动 框架 只 需要 两 个 文件 : 客户 端 交 互 页 面 (main.html) 和 服务 器 端 响应 页 面 
(server.html)， 就 可 以 完成 异步 信息 交互 的 任务 。 
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| (4) 预览 效果 ， 本 例 效果 与 11.7.2 节 示例 相同 ， 如 图 11.6 所 示 ， 用 户 可 以 参阅 本 书 示例 源 代码 
| 了解 更 具体 的 代码 和 运行 效果 。 
| 


会 内 | 11.7.4 ”封装 用 户 代理 检测 


本 节 案 例 是 一 个 相对 复杂 的 插件 ， 读 者 可 以 根据 实际 情况 选 学 ， 具 体内 容 请 扫 码 阅读 。 


.324 . 


章 


DOM 操作 


DOM 是 JavaScript 操作 网 页 的 接口 ,全称 为 文档 对 象 模型 ( Document Object Model )。 
它 的 作用 是 将 网 页 转换 为 一 个 JavaScript 对 象 ,从 而 可 以 用 脚本 进行 各 种 操作 ( 如 增删 内 容 ) 

浏览 器 会 根据 DOM 模型 ， 将 结构 化 文档 ( 如 HTML 和 XML ) 解析 成 一 系列 的 节点 ， 
再 由 这 些 节 点 组 成 一 个 树 状 结构 (DOM Tree )。 所 有 的 节点 和 最 终 的 树 状 结构 ， 都 有 规范 的 
对 外 接口 。 所 以 ，DOM 可 以 理解 成 网 页 的 编程 接口 。DOM 有 自己 的 国际 标准 ， 目 前 的 通 


用 版 本 是 DOM3， 下 一 代 版 本 DOM 4 正在 拟定 中 


严格 地 说 ，DOM 不 属于 JavaScript， 但 是 操作 DOM 是 JavaScript 最 常见 的 任务 ， 而 


JavaScript 也 是 最 常用 于 DOM 操作 的 语言 


实现 和 用 法 


【 学 习 重 点 】 


ml 


瑟瑟 于 芋 


了 解 DOM 
使 用 JavaScript 操作 节点 。 
使 用 JavaScript 操作 元 素 。 


使 用 JavaScript 操作 文本 和 属性 。 


使 用 JavaScript 操作 文档 。 


本 章 介 绍 的 就 是 JavaScript 对 DOM 标准 的 
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| 12.1 DOM 版 本 概述 


在 W3C 推出 DOM 标准 之 前 ， 市 场 已 经 流行 了 不 同 版 本 的 DOM 规范 ， 主 要 包括 IE 和 Netscape 
两 个 浏览 器 厂商 各 自制 订 的 私有 规范 , 这 些 规范 定义 了 一 套 文档 结构 操作 的 基本 方法 。 虽 然 这 些 规范 
| 存在 差异 ， 但 是 思路 和 用 法 基本 相同 ， 如 文档 结构 对 象 、 事 件 处 理 方式 、 脚 本 化 样式 等 。 习 惯 上 ,我 
| 们 把 这 些 规范 称 为 DOM 0 级 ， 虽 然 没 有 被 标准 化 ， 但 是 得 到 所 有 浏览 器 的 支持 ， 并 被 广泛 应 用 。 
1998 年 W3C 对 DOM 进行 标准 化 ， 并 先后 推出 了 3 个 不 同 的 版 本 。 注 意 ， 每 个 版 本 
都 是 在 上 一 个 版 本 基础 上 进行 完善 和 扩展 。 但 是 在 某 些 情况 下 ,不同 版 本 之 间 可 能 会 存在 
不 兼容 的 规定 。 

考虑 到 本 节 内 容 偏 于 基础 理论 , 仅 做 了 解 , 作为 选 学 内 容 , 感 兴趣 的 读者 请 扫 码 阅读 。 


12.2 节 点 


| DOMI 级 定义 了 Node 接口 ， 该 接口 为 DOM 的 所 有 节点 类 型 定义 了 原始 类 型 。JavaScript 实现 了 
| 这 个 接口 ， 定 义 所 有 节点 类 型 必须 继承 Node 类 型 。 作 为 Node 的 子 类 或 孙 类 ， 都 拥有 Node 的 基本 属 
| 性 和 方法 。 


12.2.1 节点 类 型 


| DOM 的 最 小 组 成 单位 叫 作 节点 (Node)。 文 档 的 树 形 结构 (DOM 树 ) 就 是 由 各 种 不 同类 型 的 节 
| 点 组 成 。 每 个 节点 可 以 看 作 是 文档 树 的 一 片 叶子 。 常 用 的 节点 的 类 型 有 7 种 ， 简 单 说 明 如 下 。 
| Document: 整个 文档 树 的 顶层 节点 。 

DocumentType: doctype 标签 〈 如 <!DOCTYPE html>) 。 

Element: 网 页 的 各 种 HTML 标签 (如 <body>、<a> 等 ) 。 

Attribute: 网 页 元 素 的 属性 (如 class="right") 。 

Text: 标签 之 间或 标签 包含 的 文本 。 

Comment: 注释 。 

DocumentFragment: 文档 的 片段 。 

这 7 种 节点 都 属于 浏览 器 原生 提供 的 节点 对 象 的 派生 对 象 ， 具 有 一 些 共 同 的 属性 和 方法 。 
关于 节点 类 型 的 详细 说 明和 示例 演示 ， 请 扫 码 阅读 。 


12.2.2 ”节点 名 称 和 值 


| 使 用 节点 的 nodeName 和 nodeValue 属性 可 以 读 取 节点 的 名 称 和 值 。 这 两 个 属性 的 值 完 全 取决 于 
| 节点 的 类 型 ， 具 体 说 明 如 表 12.1 所 示 。 
| 


表 12.1 节点 的 nodeName 和 nodeValue 属性 说 明 


因 办 办 办 办 加 


节点 类 型 nodeValue 返回 值 
| Document #document null 
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续 表 | 
DocumentFragment #document-fragment null | 
DocumentType doctype 名 称 null | 
EntityReference 实体 引用 名 称 null 
Element 元 素 的 名 称 〔 或 标签 名 称 ) null 
Attr 属性 的 名 称 属性 的 值 | 
ProcessingInstruction target 节点 的 内 容 | 
Comment #comment 注释 的 文本 | 
Text Hext 节点 的 内 容 | 
CDATASection #cdata-section 节点 的 内 容 | 
Entity 实体 名 称 null | 
Notation 符号 名 称 null 


【示例 】 在 读 取 这 两 个 属性 值 之 前 ， 最 好 是 先 检测 一 下 节点 的 类 型 。 
Var node = document.getElementsByTagName("body")[0]: 
if (node.nodeType—1) 
Var value = node.nodeName; 
console.log(value); 


在 上 面 示例 中 ， 首 先 检 查 节点 类 型 ， 看 它 是 不 是 一 个 元 素 。 如 果 是 ， 则 读 取 nodeName 的 值 。 对 
于 元 素 节 点 ，nodeName 中 保存 的 始终 都 是 元 素 的 标签 名 ， 而 nodeValue 的 值 则 始终 为 null。 

nodeName 属性 在 处 理 标签 时 比较 实用 ， 而 nodeValue 属性 在 处 理 文本 信息 时 比较 实用 。 

【拓展 】 

下 面 简单 介绍 一 下 节点 的 基本 属性 , 部 分 属性 还 会 在 后 面 小 节 中 详细 讲解 , 具体 内 容 请 扫 码 阅读 。 


12.2.3 ”节点 树 


-个 文档 的 所 有 节点 ， 按 照 所 在 的 层级 ， 可 以 抽象 成 一 种 树 状 结构 ， 这 种 树 状 结构 就 是 DOM。 

最 顶层 的 节点 就 是 document 节点 ， 它 代表 了 整个 文档 。 文 档 里 面 最 高 一 层 的 HTML 标签 ， 一 般 
是 <html>， 它 构成 树 结构 的 根 节点 (Root Node)， 其 他 HTML 标签 节点 都 是 它 的 下 级 。 

除了 根 节点 以 外 ， 其 他 节点 相对 于 周围 的 节点 都 存在 3 种 关系 。 

父 节点 关系 (parentNode): 直接 的 那个 上 级 节点 。 

子 节点 关系 (childNodes): 直接 的 下 级 节点 。 

同 级 节点 关系 (sibling): 拥有 同一 个 父 节点 的 节点 。 

DOM 提供 操作 接口 ， 用 来 获取 3 种 关系 的 节点 。 其 中 ， 子 节点 接口 包括 firstChild (第 一 个 子 节 | 
点 ) 和 lastChild (最 后 一 个 子 节点 ) 等 属性 ， 同 级 节点 接口 包括 nextSibling (紧邻 在 后 的 那个 同 级 节 | 
点 ) 和 previousSibling (紧邻 在 前 的 那个 同 级 节点 ) 属性 。 oF 回 | 

限于 篇 幅 ， 把 本 节 的 1 个 示例 代码 放 在 线 上 呈现 ， 该 例 演示 了 节点 之 间 的 关系 ， 
读者 可 以 查看 本 节 示 例 源 代码 ， 或 者 扫描 阅读 。 


12.2.4 ”访问 节点 
通过 节点 之 间 的 树 形 关 系 ， 可 以 定位 文档 中 每 个 节点 。DOM 为 Node 类 型 定义 如 下 属性 ， 以 方 | 
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| 便 Javaseript 对 文档 树 中 每 个 节点 进行 遍历 。 

ownerDocument: 返回 当前 节点 的 根 元 素 (document 对 象 ) 。 

parentNode: 返回 当前 节点 的 父 节 点 。 所 有 的 节点 都 仅 有 一 个 父 节点 。 
childNodes: 返回 当前 节点 的 所 有 子 节点 的 节点 列表 。 

firstChild: 返回 当前 节点 的 首 个 子 节点 。 

lastChild: 返回 当前 节点 的 最 后 一 个 子 节点 。 

nextSibling: 返回 当前 节点 之 后 相 邻 的 同 级 节点 。 

previousSibling: 返回 当前 节点 之 前 相 邻 的 同 级 节点 。 

1. childNodes 

每 个 节点 都 有 一 个 childNodes 属性 ， 保 存 着 nodeList 对 象 ， 它 表示 所 有 子 节点 的 列表 。 


容 提示 : nodeList 是 一 种 类 数组 对 象 ， 用 于 保存 一 组 有 序 的 节点 ， 用 户 可 以 通过 下 标 位 置 来 访问 这 
些 节点 。 虽然 childNodes 可 以 通过 方 括号 语法 来 访问 nodeList 的 值 ， 而且 childNodes 对 象 
包含 一 个 length 属性 , 它 表 示 列 表 包 含 子 节点 的 个 数 ( 长 度 ), 但 childNodes 并 不 是 数组 ， 
不 能 够 直接 调动 数组 的 方法 。 


图 加 


中 SN 
® 
因 办 办 办 办 国 


| 4 注意 : nodeList 对 象 实 际 上 是 基于 DOM 结构 动态 执行 查询 的 结果 ，DOM 结构 的 变化 能 够 自动 
反映 在 nodeList 对 象 中 。 因 此 ， 我 们 不 能 够 以 静态 的 方式 处 理 nodeList 对 象 。 
| 【示例 1】 下 面 示例 展示 了 如 何 访 问 保存 在 nodeList 中 的 节点 ， 通过 方 括号 ， 也 可 以 使 用 item() 
| 方法 (testl .html)。 
<u> 
<li>D 表示 文档 ，HTML 文档 结构 。</li> 


| <li>0 表示 对 象 ， 文 档 结构 的 JavaScript 脚本 化 映射 。</li> 
| <li>M 表示 模型 ， 脚 本 与 结构 交互 的 方法 和 行为 。</li> 


</ul> 
<script> 
var tag = document.getElementsByTagName("ul")[0]: 。// 获取 列表 元 素 
| vara=tag.childNodes: / 获取 列表 元 素 包 含 的 所 有 节点 
| consolelog(a[0] nodeType): / 第 1 个 节点 类 型 ， 返 回 值 为 3， 显 示 为 文本 节点 
| console.log(a.item(1).innerHTML); // 显示 第 2 个 节点 包含 的 文本 
console.log(a.length): // 包含 子 节点 个 数 ，nodeList 长 度 
</script> 


上 面 代 码 显 示 ， 无 论 使 用 方 括号 语法 ， 还 是 使 用 item0 方 法 ， 都 可 以 正常 访问 nodeList 集合 包含 
s 回 | 的 元 素 ， 但 使 用 方 括号 语法 更 方便 。 注 意 ，length 属性 返回 值 是 动态 的 ， 是 访问 nodeList 的 那 一 刻 包 
| 含 的 节点 数量 ， 如 果 列 表 项 目 发 生变 化 ，length 属性 值 也 会 随 之 变化 。 


限于 篇 幅 ， 我 们 把 下 面 2 个 示例 代码 放 在 线 上 呈现 ， 读 者 可 以 查看 本 节 示 例 源 代码 ， 或 者 扫 码 


| 2. parentNode 

| 每 个 节点 都 有 一 个 parentNode 属性 ， 该 属性 指向 文档 树 中 的 父 节点 。 包 含 在 childNodes 列表 中 
| 的 所 有 节点 都 具有 相同 的 父 节 点 ， 因 此 它们 的 parentNode 属性 都 指向 同一 个 节点 。 

| parentNode 属性 返回 节点 永远 是 一 个 元 素 类 型 节点 ， 因 为 只 有 元 素 节点 才 可 能 包含 子 节点 。 不 过 


hs 


document 节点 没有 父 节点 ，document 节点 的 parentNode 属性 将 返回 null。 
3. firstChild 和 lastChild 


firstChild 属性 返回 第 一 个 子 节点 ，lastChild 属性 返回 最 后 一 个 子 节点 。 文 本 节点 和 属性 节点 的 | 


firstChild 和 lastChild 属性 返回 值 总 是 为 null。 


< 揣 注意 : firstChild 等 价 于 childNodes 的 第 一 个 元 素 ，lastChild 属性 值 等 价 于 childNodes 的 最 后 一 


个 元 素 。 
node.childNodes[0] = node .firstChild 
Dode.childNodes[node.childNodes.length-1] = node.lastChild 
4. nextSibling 和 previousSibling 


nextSibling 属性 返回 下 一 个 相 邻 节点 ，previousSibling 属性 返回 上 一 个 相 邻 节点 。 如 果 没 有 同属 
一 个 父 节 点 的 相 邻 节点 ， 则 它们 将 返回 null。 


5. ownerDocument 

在 DOM 文档 树 中 ， 可 以 使 用 ownerDocument 属性 访问 根 节点 。 

node.ownerDocument 

通过 每 个 节点 的 ownerDocument 属性 ， 可 以 不 必 通 过 层 层 回 溯 的 方式 到 达 顶 端 ， 而 是 可 以 直接 
访问 文档 节点 。 另 外 ， 用 户 也 可 以 使 用 下 面 方式 访问 根 节点 。 

document.documentElement 


【示例 2】 以 根 节点 为 起 点 ， 利 用 节点 的 树 形 关系 ， 可 以 遍历 文档 中 所 有 节点 。 例 如 ， 针 对 下 面 
文档 结构 。 


<body><span class="red">body</span> 元 素 </body></html> 

可 以 使 用 下 面 的 方法 获取 对 body 元 素 的 引用 。 

varb = document.documentElement.lastChild: 

或 者 : 

b= document.documentElement.firstChild.nextSibling.nextSibling: 

然后 再 通过 下 面 的 方法 获取 span 元 素 中 包含 的 文本 。 

Var text = document.documentElementlastChild.firstChild.firstChild nodeValue: 

上 述 反映 节点 关系 的 所 有 属性 都 是 只 读 的 ,其 中 childNodes 属性 与 其 他 属性 相 比 更 方便 一 些 , 因 
为 只 须 使 用 简单 的 关系 指针 ， 就 可 以 通过 它 访问 文档 树 中 的 任何 节点 。 

另外 , hasChildNodesO 是 一 个 非常 有 用 的 方法 , 当 节点 包含 一 或 多 个 子 节点 时 , 该 方法 返回 true， 
否则 返回 false。 这 上 比 查询 childNodes 列表 的 length 属性 更 简单 、 有 效 。 
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【拓展 】 
不 同 的 节点 除了 继承 Node 接口 以 外 ， 还 会 继承 其 他 接口 。ParentNode 接口 用 于 
3 加 ”获取 当前 节点 的 Element 子 节点 ，ChildNode 接口 用 于 处 理 当 前 节点 的 子 节点 (包含 但 
EE 不 限于 Element 子 节点 )。 


ParentNode 和 ChildNode 接口 仅 作为 选 学 内 容 , 供 读者 参考 , 感 兴趣 的 读者 可 以 


二 上 阅读 。 扫 码 阅读 。 
四 12.2.5 “操作 节点 


ss Node 类 型 为 所 有 节点 定义 了 很 多 原型 方法 ， 以 方便 对 节点 进行 操作 ， 其 中 获得 所 有 浏览 器 一 致 
视频 讲解 | 支持 的 方法 如 表 12.2 所 示 。 


| 表 12.2 Node 类 型 原型 方法 说 明 
方 法 说 明 


appendChild0 向 节点 的 子 节点 列表 的 结尾 添加 新 的 子 节点 
cloneNodeO 复制 节点 
hasChildNodesO 判断 当前 节点 是 否 拥有 子 节点 


insertBefore0 在 指定 的 子 节点 前 插入 新 的 子 节点 
normalizeO) 合并 相 邻 的 Text 节点 并 删除 空 的 Text 节点 
removeChildO 删除 (并 返回 ) 当前 节点 的 指定 子 节点 
replaceChildO 用 新 节点 替换 一 个 子 节点 


| 其 中 appendChild()、insertBefore()、removeChild()、replaceChild0 方 法 用 于 对 子 节点 进行 添加 、 
| 删除 和 复制 操作 。 要 使 用 这 几 个 方法 必须 先 取得 父 节点 ， 可 以 使 用 parentNode 属性 。 另 外 ， 并 不 是 
| 所 有 类 型 的 节点 都 有 子 节点 ， 如 果 在 不 支持 子 节点 的 节点 上 调用 了 这 些 方 法 ,将 会 导致 错误 发 生 。 由 
| 于 这 些 方法 多 用 于 操作 元 素 ， 因 此 将 在 下 面 章节 中 再 详细 说 明 。 
| cloneNode0 方 法 用 于 克隆 节点 ， 用 法 如 下 。 

nodeObject.cloneNode(include all) 


参数 include_all 为 布尔 值 ， 如 果 为 tue， 那 么 将 会 克隆 原 节点 ， 以 及 所 有 子 节点 ; 为 false 时 ， 仅 
复制 节点 本 身 。 复 制 后 返回 的 节点 副本 属于 文档 所 有 ， 但 并 没有 为 它 指定 父 节 点 ， 需 要 通过 
”appendChild()、insertBefore() 或 replaceChild0 方 法 将 它 添加 文档 中 。 


4 注意 : cloneNode0 方 法 不 会 复制 添加 到 DOM 节点 中 的 JavaSeript 属性 ， 如 事件 处 理 程序 等 。 这 
| 个 方法 只 复制 HTML 特性 或 子 节点 ， 其 他 一 切 都 不 会 复制 。IE 在 此 存在 一 个 bug， 即 它 
| 会 复制 事件 处 理 程序 ， 所 以 建议 在 复制 之 前 最 好 先 移 除 事件 处 理 程序 。 


9 【示例 】 下 面 示例 演示 了 cloneNode( 方 法 的 克隆 过 程 ， 其 中 为 列表 框 绑 定 一 个 
click 事件 处 理 程序 ， 通 过 深度 克隆 之 后 ， 新 的 列表 框 没有 添加 JavaSeript 事件 ， 仅 克 
隆 了 HTML 类 样式 和 style 属性 。 限 于 篇 幅 ， 示 例 代码 在 线 上 呈现 ， 请 扫 码 阅读 。 
【拓展 】 
节点 都 是 单个 对 象 ， 有 时 会 需要 一 种 数据 结构 ， 能 够 容纳 多 个 节点 。DOM 提供 
两 种 集合 对 象 ， 用 于 实现 这 种 节点 的 集合 : NodeList 和 HTMLCollection。 作 为 选 学 
内 容 ， 感 兴趣 的 读者 可 以 扫 码 了 解 具 体 说 明 。 


“330。 


第 12 章 DO 抒 作 一 SS | 
< | 


12.3 文档 


在 DOM 中 ，Document 类 型 表示 文档 节点 ，HTMLDocument 是 Document 的 子 类 ，document 对 | 
象 是 HTMLDocument 的 实例 ， 它 表示 HTML 文档 。 同 时 ，document 对 象 又 是 window 对 象 的 属性 ， 
因此 可 以 在 全 局 作用 域 中 直接 访问 document 对 象 。 


12.3.1 访问 文档 节点 和 子 节点 


document 节点 是 文档 的 根 节点 ，window.document 属性 就 指向 这 个 节点 。 只 要 浏览 器 开始 载 入 
HTML 文档 ， 这 个 节点 对 象 就 存在 ， 可 以 直接 调用 。 

document 节点 有 不 同 的 办 法 可 以 获取 。 

对 于 正常 的 网 页 ， 直 接 使 用 document 或 window.document。 

对 于 iframe 载 入 的 网 页 ， 使 用 过 ame 节点 的 contentDocument 属性 。 

对 Ajax 操作 返回 的 文档 ， 使 用 XMLHttpRequest 对 象 的 responseXML 属性 。 

对 于 包含 某 个 节点 的 文档 ， 使 用 该 节点 的 ownerDocument 属性 。 

上 面 这 4 种 document 节点 ， 都 部 署 了 Document 接口 ,因此 有 共同 的 属性 和 方法 。 当 然 ， 各 自 也 
有 一 些 自己 独特 的 属性 和 方法 ， 如 HTML 和 XML 文档 的 document 节点 就 不 一 样 。 

访问 文档 子 节点 的 方法 有 如 下 两 种 。 

使 用 documentElement 属性 ， 该 属性 始终 指向 HTML 页 面 中 的 html 元 素 。 

使 用 childNodes 列表 访问 文档 元 素 。 

例如 ， 下 面 代码 都 可 以 找到 html 元 素 ， 不 过 使 用 documentElement 属性 更 快捷 。 

var html = document.documentElement: 

var html = document.childNodes[0]: 

Var html = document.firstChild; 

document 对 象 有 一 个 body 属性 ， 使 用 它 可 以 访问 body 元 素 。 例 如 : 

Var body = document.body: 


所 有 浏览 器 都 支持 document.documentElement 和 document.body 用 法 。 

<!DOCTYPE> 标 签 是 一 个 与 文档 主体 不 同 的 实体 ， 可 以 通过 doctype 属性 访问 它 。 例 如 : 

Var doctype = document.doctype: 

由 于 浏览 器 对 document.doctype 的 支持 不 一 致 ， 因 此 开发 人 员 很 少 使 用 。 

在 html 元 素 之 外 的 注释 也 算是 文档 的 子 节点 ， 但 是 不 同 的 浏览 器 在 处 理 它们 时 存在 很 大 差异 ， 
在 实际 应 用 中 也 没有 什么 用 处 ， 用 户 可 以 忽略 。 

从 技术 上 讲 ， 不 需要 为 document 对 象 调用 appendChild0 、removeChild0 和 replaceChild0 方 法 来 
为 文档 添加 、 删 除 或 蔡 换 子 节点 ， 因 为 文档 类 型 是 只 读 的 ， 而 且 文 档 只 能 有 一 个 固定 的 元 素 子 节点 。 

【拓展 】 

document 节点 有 很 多 属性 ， 其 中 相当 一 部 分 属于 快捷 方式 ， 指 向 文档 
内 部 的 某 个 节点 。 

拓展 部 分 为 选 学 内 容 ， 感 兴趣 的 读者 可 以 扫 码 阅读 。 


视频 讲解 
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| 12.3.2 ”访问 文档 信息 


HIMLDocument 的 实例 对 象 document 包含 很 多 属性 ， 用 来 访问 文档 信息 ， 简 单 说 明 如 下 。 

title: 设置 或 返回 <title> 标 签 包含 的 文本 信息 。 

lastModified: 返回 文档 最 后 被 修改 的 日 期 和 时 间 。 

URL: 返回 当前 文档 的 完整 URL， 即 地 址 栏 中 显示 的 地 址 信息 。 

domain: 返回 当前 文档 的 域名 。 

referrer: 返回 链接 到 当前 页 面 的 那个 页 面 的 URL。 在 没有 来 源 页 面 的 情况 下 ，referrer 属性 
中 可 能 会 包含 空 字符 串 。 

实际 上 ， 上 面 这 些 信息 都 存在 于 请 求 的 HITP 头 部 ， 不 过 通过 这 些 属 性 更 方便 用 户 在 JavaScrip 


加 网 回回 网 


【拓展 】 
上 面 简单 介绍 了 几 个 常用 的 文档 信息 属性 ， 下 面具 体 说 明文 档 信息 的 全 部 属性 ， 
作为 参考 供 读者 们 选 学 ， 具 体内 容 请 扫 码 阅读 。 


2 3.3 ”访问 文档 元 素 


document 对 象 包含 多 个 访问 文档 内 元 素 的 方法 ， 简 单 说 明 如 下 。 
getElementById0: 返回 指定 id 属性 值 的 元 素 。 注 意 ，id 值 要 区 分 大 小 写 ， 如 果 找 到 多 个 id 
相同 的 元 素 ， 则 返回 第 一 个 元 素 ， 如 果 没 有 找到 指定 id 值 的 元 素 ， 则 返回 null。 
getElementsByTagName(): 返回 所 有 指定 标签 名 称 的 元 素 节点 。 
| getElementsByName(): 返回 所 有 指定 名 称 (name 属性 值 ) 的 元 素 节点 。 该 方法 多 用 于 表单 
| 结构 中 ， 用 于 获取 单 选 按钮 组 或 复 选 框 组 。 
| 安 提示 : getElementsByTagName() 方 法 返回 的 是 一 个 HTMLCollection 对 象 , 与 nodeList 对 象 类 似 ， 
可 以 使 用 方 括号 语法 或 者 item() 方 法 访问 HTMLCollection 对 象 中 的 元 素 , 并 通过 length 属 
性 取得 这 个 对 象 中 元 素 的 数量 。 
【示例 】HTMLCollection 对 象 还 包含 一 个 namedItem() 方 法 ， 该 方法 可 以 通过 元 素 的 name 特性 
取得 集合 中 的 项 目 。 下 面 示例 可 以 通过 namedItem("news") 方 法 找到 HTMLCollection 对 象 中 name 为 
news 的 图 片 。 


四 办 


Var images = document.getElementsByTagName("img"): 

var news = images.namedItem("news"): 

</script> 

还 可 以 通过 下 面 用 法 获取 页 面 中 所 有 元 素 ， 其 中 参数 “*” 表 示 所 有 元 素 。 

var allElements = document.getElementsByTagName("*") 

正 6 及 其 以 下 版 本 浏览 器 对 其 不 支持 , 不 过 对 于 正 来 讲 , 可 以 使 用 document.all 来 获取 文档 中 所 
J | 有 元 来 和 点 。 关 于 元 素 的 访问 将 在 12.4 节 详细 说 明 。 


“2°* 


第 12 章 DOM 操作 | T 


【拓展 】 回 
document 对 象 包 含 大 量 方法 ， 上 面 简单 介绍 了 3 个 访问 元 素 节点 的 方法 , 更 多 方 
法 仅 作为 选 学 内 容 供 读者 了 解 ， 具 体内 容 请 扫 码 阅读 。 


12.3.4 ”访问 文档 集合 


加 ”document.anchors: 返回 文档 中 所 有 带 name 特性 的 <a> 标 签 。 

document.applets: 返回 文档 中 所 有 <apple 人 > 标签 ， 不 再 推荐 使 用 。 

加 ”document.forms: 返回 文档 中 所 有 <form> 标 签 ， 与 document.getElementsByTagName("form") 
得 到 的 结果 相同 。 

回 ” documentimages: 返回 文档 中 所 有 <img> 标 签 ， 与 document.getElementsByTagName("img") 
得 到 的 结果 相同 。 

document.links: 返回 文档 中 所 有 带 href 特性 的 <a> 标 签 。 

【拓展 】 

以 下 属性 返回 文档 内 部 特定 元 素 的 集合 ， 都 是 类 似 数组 的 对 象 。 这 些 集合 都 是 动 

态 的 ， 原 节点 有 任何 变化 ， 立 刻 会 反映 在 集合 中 ， 详 细 说 明 请 扫 码 阅读 。 


可 


加 
12.3.5 ”使 用 HTML5 Document ee 


HTML5 扩展 HTMLDocument， 增 加 很 多 新 功能 。 本 节 重 点 介绍 被 各 浏览 器 广泛 支持 的 功能 。 
1. readyState 
document 的 readyState 属性 包含 以 下 两 个 可 能 的 值 。 
loading: 正在 加 载 。 
complete: 已 经 加 载 。 
功能 类 似 onload 事件 处 理 程序 ， 表 明文 档 己 经 加 载 完毕 。 例 如 : 
if (document.readyState — "complete") { 
/ 执行 操作 
} 


浏览 器 支持 状态 ，IE 4+、Firefox 3.6+、Safari、Chrome 和 Opera 9+， 可 以 放心 使 用 。 


2. compatMode 
document.compatMode 返回 文档 的 泻 染 模式 ， 标准 模式 ("CSS1Compat") 和 怪异 模式 ("Back 
Compat")。 例 如 : 
if (document.compatMode — "CSS1Compat") { 
alert(" 标 准 模式 "): 
Jelse { 
alert(" 怪 异 模式 "): 
} 
浏览 器 支持 状态 : IE 6+、Firefox、Safari 3.1+、Opera 和 Chrome， 可 以 放心 使 用 。 
3. head 
document.body 引用 文档 的 body 元 素 ，HTMLS5 新 增 document.head 属性 引用 文档 的 head 元 素 。 
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者 
| 例如 ， 使 用 下 面 代码 兼容 不 同 浏览 器 。 

| 

| Var head = document.head || document.getElementsByTagName("head")[0]: 

| 浏览 器 支持 状态 : Safari 5+ 和 Chrome， 需 要 按 上 面 代码 方式 进行 兼容 。 


琶 丰 | 4. charset 
document.charset 表示 文档 中 实际 使 用 的 字符 集 , 也 可 以 用 来 指定 新 字符 集 。 默认 值 为 "UTF-16"， 


| 可 以 通过 <meta> 元 素 、HTTP 头 部 或 直接 设置 charset 属性 修改 默认 值 。 
浏览 器 支持 状态 正 、Firefox、Safari 、Opera 和 Chrome， 可 以 放心 使 用 。 
5. defaultCharset 
document.defaultCharset 表示 根据 默认 浏览 器 及 操作 系统 的 设置 ， 当 前 文档 默认 的 字符 集 应 该 是 
什么 。 如 果 文 档 没 有 使 用 默认 的 字符 集 ， 那 么 charset 和 defaultCharset 属性 值 可 能 会 不 一 样 。 
浏览 器 支持 状态 : 正 、Safari 和 Chrome。 


12.4 元 素 


| Element 对 象 对 应 网 页 的 HTML 标签 元 素 。 每 一 个 HTML 标签 元 素 , 在 DOM 树 上 都 会 转化 成 一 
| 个 Element 节点 对 象 ( 以 下 简称 元 素 )。 


12.4.1 访问 元 素 


1. getElementByld() 方 法 
使 用 getElementById0 方 法 可 以 准确 获取 文档 中 指定 元 素 ， 用 法 如 下 。 
document.getElementById(ID) 
参数 ID 表示 文档 中 对 应 元 素 的 id 属性 值 。 如 果 文 档 中 不 存在 指定 元 素 ， 则 返回 值 为 null。 该 方 
法 只 适用 于 document 对 象 。 
【示例 1】 下 面 脚本 能 够 获取 对 <div id="box"> 对 象 的 控制 权 。 
<div id="box"> 盒 子 </div> 
<script> 
var box = document.getElementById("box"): // 获取 id 属性 值 为 box 的 元 素 
/script> 
【示例 2】 在 下 面 示例 中 ， 使 用 getElementById0 方 法 获取 <div id="box"> 对 象 的 引用 ， 然 后 使 用 
nodeName、nodeType、parentNode 和 childNodes 属性 查看 该 对 象 的 节点 类 型 、 节 点 名 称 、 父 节点 和 
第 一 个 子 节点 的 名 称 。 


<div id="box"> 盒 子 </div> 

<script> 

var box = document.getElementById("box"): / 获取 指定 盒子 的 引用 
| var info = "nodeName: "+box.nodeName: / 获取 该 节点 的 名 称 
| info += "modeType: "+ box.nodeType: / 获取 该 节点 的 类 型 


| info += "\rparentNode: "+ box.parentNode.nodeName: 1/ 获取 该 节点 的 父 节点 名 称 
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info += "\rchildNodes: "+box.childNodes[0].nodeName: / 获取 该 节点 的 子 节点 名 称 


alert(info); // 显示 提示 信息 

</script> 

2. getElementByTagName() 方 法 | 全 

使 用 getElementByTagName() 方 法 可 以 获取 指定 标签 名 称 的 所 有 元 素 ， 用 法 如 下 。 Note 
document.getElementsByTagName(tagName) 


参数 tagName 表示 指定 名 称 的 标签 , 该 方法 返回 值 为 一 个 节点 集合 , 使 用 length 属性 可 以 获取 集 | 
合 中 包含 元 素 的 个 数 ， 利 用 下 标 可 以 访问 其 中 某 个 元 素 对 象 。 | 
【示例 3】 在 节点 集合 中 包含 的 都 是 元 素 对 象 ， 可 以 使 用 nodeName、nodeType、parentNode 和 | 
childNodes 属性 查看 该 对 象 的 节点 类 型 、 节 点 名 称 、 父 节点 和 第 一 个 子 节点 的 名 称 。 | 
varp = document.getElementsByTagName("p"); 。 // 获取 Pp 元素 的 所 有 引用 
alert(p[4].nodeName); / 显示 第 五 个 p 元 素 对 象 的 节点 名 称 | 
【示例 4】 下 面 代 码 使 用 for 循环 获取 每 个 p 元 素 ， 并 设置 p 元 素 的 class 属性 为 “red”。 | 
varp = document.getElementsByTagName("p"); 。 // 获取 Pp 元 素 的 所 有 引用 | 


for(var i=0:i<p.length:i++) { // 遍历 p 数据 集合 | 
plil].setAttribute("class","red"): // 为 每 个 p 元 素 定义 red 类 样式 | 

} | 
【拓展 】 | 


下 面 介绍 一 下 Element 的 方法 。 这 些 方法 在 HIML5 开发 中 非常 实用 ， 不 过 对 
于 初学 者 来 讲 ， 建 议 仅 做 了 解 ， 感 兴趣 的 读者 请 扫 码 阅读 。 


12.4.2 ”遍历 元 素 


使 用 parentNode、nextSibling、previousSibling、firstChild 和 lastChild 属性 可 以 遍历 文档 树 中 每 个 | 视频 讲解 
节点 。 但 是 ， 在 实际 开发 中 常 需要 遍历 元 素 节点 ， 而 不 是 文本 等 其 他 类 型 节点 ， 为 此 本 节 将 在 上 面 
5 个 指针 的 基础 上 ， 扩 展 仅 能 够 指向 元 素 类 型 的 指针 函数 。 

限于 篇 幅 ， 我 们 把 本 节 7 个 示例 代码 放 在 线 上 呈现 ， 读 者 可 以 查看 
本 节 示 例 源 代码 ， 或 者 扫 码 阅读 。 

【补充 】 

下 面 补充 介绍 一 下 Element 的 所 有 属性 。 这 些 属性 仅 做 了 解 ， 随 着 学 et eo 
习 的 不 断 深入 ， 我 们 还 将 会 逐步 接触 并 展开 讲解 ， 具 体内 容 请 扫 码 阅读 。 线 上 阅读 1 线 上 阅读 2 


12.4.3 ”创建 元 素 

createElement0 方 法 能 够 根据 参数 指定 的 标签 名 称 创建 一 个 新 的 元 素 ， 并 返回 新 建 元 素 的 引用 ， 
用 法 如 下 。 

varelement = document.createElement("tagName"): 


其 中 element 表示 新 建 元 素 的 引用 ，createElement0 是 document 对 象 的 一 个 方法 ， 该 方法 只 有 一 | 
个 参数 ， 用 来 指定 创建 元 素 的 标签 名 称 。 | 


est 
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【示例 1】 下 面 代码 在 当前 文档 中 创建 了 一 个 段落 标记 P， 并 把 该 段落 的 引用 存储 到 变量 p 中 。 
由 于 该 变量 表示 一 个 元 素 节点 ， 所 以 它 的 nodeType 属性 值 等 于 1， 而 nodeName 属性 值 等 于 p。 
varp = document.createElement("p"); // 创建 段落 元 素 
仿生 | varinfo = "nodeName: "+pnodeName: ”// 获取 元 素 名 称 
| info +=", nodeType: "+p.nodeType: // 获取 元 素 类 型 ， 如 果 为 1 则 表示 元 素 节点 
oem 
| 使 用 createElement0 方 法 创建 的 新 元 素 不 会 被 自动 添加 文档 中 ， 因 为 新 元 素 还 没有 nodeParent 属 
性 ， 仅 在 JavaScript 上 下 文中 有 效 。 如 果 要 把 这 个 元 素 添加 文档 中 ， 还 需要 使 用 appendChild0、 
insertBefore0 或 replaceChild0 方 法 实现 。 
| 限于 篇 幅 , 我 们 把 后 面 两 个 示例 代码 以 及 要 注意 的 细节 问题 放 在 线 上 呈现 ,读者 
可 以 查看 本 节 示 例 源 代码 ， 或 者 扫 码 阅读 。 


回 H 
线 上 阅读 


12.4.4 复制 节点 


cloneNode0 方 法 可 以 创建 一 个 节点 的 副本 ， 其 用 法 可 以 参考 12.2.5 节 介绍 。 
【示例 1】 在 下 面 示例 中 ， 首 先 创建 一 个 节点 p， 然 后 复制 该 节点 为 pl， 再 利用 nodeName 和 
nodeType 属性 获取 复制 节点 的 基本 信息 ， 该 节点 的 信息 与 原来 创建 的 节点 基本 信息 相同 。 


varp = document.createElement("p"); // 创建 节点 
varpl =p.cloneNode(false): // 复制 节点 
var info = "nodeName: "+pl.nodeName; / 获取 复制 节点 的 名 称 
info +=",nodeType: "+pl.nodeType: / 获取 复制 节点 的 类 型 


// 显示 复制 节点 的 名 称 和 类 型 相同 


限于 篇 幅 ， 我 们 把 后 面 3 个 示例 代码 以 及 要 注意 的 细节 问题 放 在 线 上 呈现 ， 读 者 可 
以 查看 本 节 示 例 源 代码 ， 或 者 扫 码 阅读 。 


12.4.5 ”插入 节点 


在 文档 中 插入 节点 主要 包括 两 种 方法 。 

| 1. appendChild() 方 法 

appendChild0 方 法 可 向 当前 节点 的 子 节点 列表 的 末尾 添加 新 的 子 节点 ， 用 法 如 下 。 
| appendChild(newchild) 

参数 newchild 表示 新 添加 的 节点 对 象 ， 并 返回 新 增 的 节点 。 


【示例 1】 下 面 示 例 展 示 了 如 何 把 段落 文本 增加 到 文档 中 指定 的 div 元 素 中 ， 使 它 成 为 当前 节点 
的 最 后 一 个 子 节点 。 
<div id="box"></div> 
<script> 
varp = document.createElement("p"); // 创建 段落 节点 
| var txt = document,createTextNode(" 盒 模型 "): // 创建 文本 节点 ， 文 本 内 容 为 “ 盒 模型 
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Pp.appendChild(txt); / 把 文本 节点 增加 到 段落 节点 中 

document.getElementById("box").appendChild(p); / 获取 id 为 box 的 元 素 ， 把 段落 节点 增加 进来 

script> 

如 果 文 档 树 中 已 经 存在 参数 节点 ， 则 将 从 文档 树 中 删除 ， 然 后 重新 插入 新 的 位 | 仿 肉 
置 ; 如 果 添 加 的 节点 是 DocumentFragment 节点 ， 则 不 会 直接 插入 ， 而 是 把 子 节点 按 | 和 
序 插 入 当前 节点 的 末尾 。 

限于 篇 幅 ， 我 们 把 下 面 1 个 示例 代码 以 及 要 注意 的 细节 问题 放 在 线 上 呈现 ， 读 
者 可 以 查看 本 节 示 例 源 代 码 ， 或 者 扫 码 阅读 。 

2. insertBefore() 方 法 | 

| 

使 用 insertBefore() 方 法 可 在 已 有 的 子 节点 前 插入 一 个 新 的 子 节点 ， 用 法 如 下 。 | 

insertBefore(newchild.refchild) 

其 中 参数 newchild 表示 插入 新 的 节点 ，refchild 表示 在 此 节点 前 插入 新 节点 。 返 回 新 子 节点 。 

限于 篇 幅 ， 我 们 把 下 面 1 个 示例 代码 放 在 网 上 ， 读 者 可 以 查看 本 节 示 例 源 代码 ， 或 者 扫 码 阅读 。| 


12.4.6 ”删除 节点 


removeChild() 方 法 可 以 从 子 节点 列表 中 删除 某 个 节点 ， 用 法 如 下 。 
nodeObject.removeChild(node) | 视频 讲解 


其 中 参数 node 为 要 删除 的 节点 。 如 果 删 除 成 功 ， 则 返回 被 删除 的 节点 ; 如 果 失 败 ， 则 返回 null。 
当 使 用 removeChild0 方 法 删除 节点 时 ， 该 节点 所 包含 的 所 有 子 节 点 将 同时 被 删除 。 
【示例 】 在 下 面 的 示例 中 单 击 按钮 时 将 删除 红 盒 子 中 的 一 级 标题 。 
<div id="red"> 
<hl> 红 盒子 </h1l> 
</div> 
<div id="blue"> 蓝 盒子 </div> 
<button id="ok"> 移 动 <button> 
<script> 
var ok = document.getElementById("ok"): / 获取 按钮 元 素 的 引用 
ok.onclick = functionO { // 为 按钮 注册 一 个 鼠标 单 击 事件 处 理 函数 
var red = document.getElementById("red"): // 获取 红色 盒子 的 引用 
var hl = document.getElementsByTagName("h1")[0]: // 获取 标题 元 素 的 引用 
Ted.removeChild(h1): // 移出 红 盒子 包含 的 标题 元 素 


} 
</script> 


限于 篇 幅 , 我 们 把 下 面 3 个 示例 代码 放 在 线 上 呈现 , 读者 可 以 查看 本 节 示 例 源 代码 , 或 者 扫 码 阅读 。 
12.4.7 替换 节点 


TeplaceChild0 方 法 可 以 将 某 个 子 节点 蔡 换 为 另 一 个 ， 用 法 如 下 。 
nodeObject.replaceChild(new_node.old node) 


| 
| 
| 
| 
人 
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其 中 参数 new_node 为 指定 新 的 节点 ，old_node 为 被 蔡 换 的 节点 。 如 果 蔡 换 成 功 ， 则 返回 被 蔡 换 
的 节点 ， 如 果 蔡 换 失 败 ， 则 返回 null。 

【示例 】 以 12.4.6 节 示例 为 基础 ， 重 写 脚本 ， 新 建 一 个 二 级 标题 元 素 ， 并 替换 掉 红色 盒子 中 的 一 
到 ”级 标 题 元 素 。 


| Var ok = document.getElementById("ok"); / 获取 按钮 元 素 的 引用 
en // 为 按钮 注册 一 个 鼠标 单 击 事件 处 理 函数 
| varred= document.getElementById("red"): // 获取 红色 盒子 的 引用 
| varhl = document.getElementsByTagName("h1")[0]; 。“// 获取 一 级 标题 的 引用 
| Var h2 = document.createElement("h2"): // 创建 二 级 标题 元 素 ， 并 引用 
TedreplaceChildh2.h1): / 把 一 级 标题 葵 换 为 二 级 标题 
| 


演示 发 现 ， 当 使 用 新 创建 的 二 级 标题 来 蔡 换 一 级 标题 后 , 则 原来 的 一 级 标题 所 包含 的 标题 文本 已 
经 不 存在 。 这 说 明 蔡 换 节 点 的 操作 不 是 蔡 换 元 素 名 称 ， 而 是 蔡 换 其 包含 的 所 有 子 节 点 ， 以 及 其 包含 的 
| 所 有 内 容 
回 同样 的 道理 , 如 果 蔡 换 节点 还 包含 子 节点 ， 则 子 节点 将 一 同 被 插入 到 被 蔡 换 的 节 
点 中 。 可 以 借助 replaceChild(0 方 法 在 文档 中 使 用 现 有 的 节点 蔡 换 另 一 个 存在 的 节点 。 
旬 限于 篇 幅 , 我 们 把 下 面 两 个 示例 代码 放 在 线 上 呈现 , 读者 可 以 查看 本 节 示 例 源 代 
线 上 阅读 码 ， 或 者 扫 码 阅读 。 


| 12.4.8 ”获取 焦点 元 素 


使 用 document.activeElement 属性 可 以 引用 DOM 中 当前 获得 了 焦点 的 元 素 。 
【示例 1】 下 面 示例 设计 当 文 本 框 获取 焦点 时 ， 使 用 document.activeElement 设置 焦点 
景色 高 之 显示。 
<input type="text" > 
<input type="text" > 
<input type="text" > 
| <script> 
| var inputs = document.getElementsByTagName("input"); 
| for(var i=0; i<inputs.length:i++) { 
inputs[i].onfocus =function(e) { 
document.activeElement.style.backgroundColor = "yellow": 


| 
| inputs[i].onblur =function(e) { 
| this.style.backgroundColor = "#ffF' 
上 
上 
| <kscripe 
| 【示例 2】 使 用 HTMLS5 新 增 的 document hasFocus() 方 法 可 以 判断 当前 文档 是 否 获得 了 焦点 。 
| <input type="text" id="text" /> 
<script> 
| document.getElementById("text").focus(): 
2 1 if(document.hasFocus()) { 
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document.activeElement.style.backgroundColor = "yellow": 
</script> 


12.4.9 检测 包含 节点 


contains0 是 正 的 私有 方法 , 用 来 检测 某 个 节点 是 不 是 另 一 个 节点 的 后 代 。 该 方法 接收 一 个 参数 ， 
指定 要 检测 的 后 代 节点 。 如 果 被 检测 的 节点 是 后 代 节 点 ， 则 返回 true; 否则 返回 false。 

浏览 器 支持 状态 : 正 、Firefox 9+、Safari、Opera 和 Chrome。 

【示例 1】 下 面 示例 测试 <div id="box"> 标 签 是 否 包含 <span> 标 签 ， 最 后 返回 true。 

<div id="box"><span></span></div> 

<script> 

var box = document.getElementById("box"): 

Var span = document.getElementsByTagName("span")[0]: 

alert(box.contains(span)): 

</script> 

DOMLevel3 定义 了 compareDocumentPosition0 方 法 ， 该 方法 也 能 够 确定 节点 间 的 关系 。 用 法 与 | 
contains0 方 法 相同 ， 但 是 返回 值 不 同 。 | 

浏览 器 支持 状态 : IE 9+、Firefox、Safari、Opera 9.5+ 和 Chrome。 | 

【示例 2】 以 上 面 示例 为 例 ， 下 面 示例 使 用 compareDocumentPosition() 方 法 测试 <div id="box"> 标 | 

签 是 否 包 含 <span> 标 签 ， 最 后 返回 值 为 20。 

<div id="box"><span></span></div> 

<script> 

Var box = document.getElementById("box"): 

Var span = document.getElementsByTagName("span")[0]: 

alert(box.compareDocumentPosition(span)): 

</script> 


容 提示 : compareDocumentPosition() 方 法 返回 一 个 整数 ， 用 来 描述 两 个 节点 在 文档 中 的 位 置 关系 。 
详细 说 明和 演示 示例 请 扫 码 阅读 。 


i125、 去 本 


文本 节点 由 Text 类 型 表示 , 包含 纯 文 本 内 容 , 或 转 义 后 的 HTML 字符 , 但 不 能 包含 HTML 代码 。 
12.5.1 访问 文本 节点 


使 用 文本 节点 的 nodeValue 属性 或 data 属性 可 以 访问 Text 节点 中 包含 的 文本 ,这 两 个 属性 中 包含 | 
的 值 相同 。 修 改 nodeValue 值 也 会 通过 data 反映 出 来 ， 反 之 亦 然 。 | 

每 个 文本 节点 还 包含 length 属性 , 使 用 它 可 以 返回 包含 文本 的 长 度 ,利用 该 属性 可 以 遍历 文本 节 | 
点 中 每 个 字符 。 | 


“339。 


To ~ /rast 网页 坊 程 愉 入 门 到 精通 ( 微 课 精 编 版 ) 


| 【示例 1] 在 下 面 示例 中 ， 获 取 div 元 素 中 的 文本 ， 比 较 直 接 的 方式 是 用 元 素 的 innerText 属性 
| 读 取 。 

| <div id="div1">div 元 素 </div> 

| <script> 


Var div = document.getElementById("div1"): 

Var text = div.inner Text:; 

alert(text): 

</script> 

但 是 innerText 属性 不 是 标准 用 法 ， 需 要 考虑 浏览 器 兼容 性 ， 标 准 用 法 如 下 。 

vartext = divfirstChildnodeValue: 

【示例 2】 下 面 设计 一 个 读 取 元 素 包 含 文本 的 通用 方法 。 

| 限于 篇 幅 ， 我 们 把 代码 放 在 线 上 呈现 ， 读 者 可 以 查看 本 节 示 例 源 代码 ， 或 者 扫 码 阅读 。 
12.5.2 ”创建 文本 节点 


使 用 document 对 象 的 createTextNode0 方 法 可 创建 文本 节点 ， 用 法 如 下 。 


document.createTextNode(data) 
| 参数 data 表示 字符 串 。 
| 【示例 1】 下面 示 例 创建 一 个 新 div 元 素 , 并 为 它 设置 class 值 为 red, 然后 再 创建 一 个 文本 节点 ， 
| 并 将 其 添加 到 div 元 素 中 ,最 后 将 div 元 素 添加 到 文档 body 元 素 中 , 这 样 就 可 以 在 浏览 器 中 看 到 新 创 
| 建 的 元 素 和 文本 节点 。 


Var element = document.createElement("div"); 

element.className = "red"; 

var textNode = document.create TextNode("Hello world!"); 

element.appendChild(textNode): 

| document.body.appendChild(element): 

| 

| 【示例 2】 由 于 解析 器 的 实现 或 DOM 操作 等 原因 ， 可 能 会 出 现 文本 节点 不 包含 文本 ， 或 者 接连 
| 出 现 两 个 文本 节点 的 情况 。 为 了 避免 这 种 情况 ， 一 般 应 该 在 父 元 素 上 调用 normalize0 方 法 ， 如 果 找 到 
了 空 文本 节点 ， 则 删除 它 ， 如 果 找 到 相 邻 的 文本 节点 ， 则 将 它们 合并 为 一 个 文本 节点 。 


Var element = document.createElement("div"): 


| 

| var textNode = document.createTextNode("Hello"): 1/ 创建 文本 节点 

| dlement.appendChild(textNode): / 追加 文本 节点 

| var anotherTextNode = document.createTextNode(" world!"): /创建 文本 节点 

| element.appendChild(another TextNode): // 追加 文本 节点 

| document.body.appendChild(element): 

| alert(element.childNodes.length): // 返回 2 

| elementnormalizeO: 

| alert(element.childNodes.length): /1/ 返回 1 

| alert(element firstChild nodeValue): / 返回 "Hello Worldl" 
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容 提示 :浏览 器 原生 提供 一 个 Text0 构 造 函 数 , 它 能 够 返回 一 个 Text 节点 . Text0 的 参数 就 是 该 Text 
节点 的 文本 内 容 。 例 如 : 
Vartextl = new TextO: 
Var text2 = new Text("This is a text node"): 


< 所 注意 ; 由 于 空格 也 是 一 个 字符 ， 所 以 哪怕 只 有 一 个 空格 ， 也 会 形成 Text 节点 。 
12.5.3 ”操作 文本 节点 


使 用 下 列 方法 可 以 操作 文本 节点 中 的 文本 。 
appendData(string): 将 字符 串 string 追加 到 文本 节点 的 尾部 。 | 视频 讲解 
deleteData(start,length): 从 start 下 标 位 置 开始 删除 length 个 字符 。 | 
insertData(start,string): 在 start 下 标 位 置 插入 字符 串 string。 
replaceData(start,length,string): 使 用 字符 串 string 蔡 换 从 start 下 标 位 置 开始 length 个 字符 。 
splitText(offset): 在 offset 下 标 位 置 把 一 个 Text 节点 分 割 成 两 个 节点 。 
substringData(start,length): 从 start 下 标 位 置 开始 提取 length 个 字符 。 

【拓展 】 

Text 节点 除了 继承 Node 节点 的 属性 和 方法 ， 还 继承 了 CharacterData 接口 。Node 节 
点 的 属性 和 方法 可 以 参考 上 面 介绍 ， 以 下 的 属性 和 方法 大 部 分 来 自 CharacterData 接口 。 

本 拓展 内 容 为 选 学 部 分 ， 感 兴趣 的 读者 可 以 扫 码 阅读 。 


12.5.4” 读 取 HTML 字符 串 


元 素 的 innerHTML 属性 可 以 返回 调用 元 素 包含 的 所 有 子 节点 对 应 的 HTML 标记 字符 串 。 最 初 它 
是 正 的 私有 属性 ，HTML5 规范 了 innerHTML 的 使 用 ， 并 得 到 所 有 浏览 器 的 支持 。 
【 示例】 下面 示例 使 用 innerHTML 属性 读 取 div 元 素 包含 的 HTML 字符 串 。 
<divid="div1"> 
<style type="text/css">p {color: red:}</style> 
<p><span>div</span> 元 素 </p> 
<div> 
<script> 
Var div = document.getElementById("div1"): 
var s = div.innerHTML: 
alert(s); 
</script> 


办 办 办 办 多加 


针对 上 面 示例 ，Mozilla 浏览 器 返回 的 字符 串 为 "<p><span>div</span> 元 素 </p>"， 而 正 浏览 器 返 | 
器 的 字符 串 为 " <style type =text/css>p{color :red:}</style><P><span>div</span> 元 素 </P>"。 
容 提示 : 不 使 用 时 应 注意 两 个 问题 : 
回 早期 Mozilla 浏览 器 的 innerHTML 属性 返回 值 不 包含 style 元 素 。 
回 早期 正 浏览 器 会 全 部 使 用 大 写 形 式 返回 元 素 的 字符 名 称 。 


另外 ， 使 用 outerHTML 属性 也 能 够 读 取 HIML 字符 串 ， 不 过 我 们 更 习惯 使 用 innerHTML 属性 。 
有 关 outerHTML 属性 介绍 可 参考 12.5.6 节 内 容 。 
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12.5.5 “插入 HTML 字符 串 


1. innerHTML 属性 
| innerHTML 属性 可 以 根据 传 入 的 HTML 字符 串 , 创建 新 的 DOM 片段 , 然后 用 这 个 DOM 片段 完 
| 全 蔡 换 调用 元 素 原 有 的 所 有 子 节点 。 设 置 innerHTML 属性 值 之 后 ， 可 以 像 访问 文档 中 的 其 他 节点 一 
样 访问 新 创建 的 节点 。 
| 【示例 1】 下 面 示例 将 创建 一 个 1000 行 的 表格 。 先 构造 一 个 HIML 字符 串 ， 然 后 更 新 DOM 的 
innerHTML 属性 。 如 果 通 过 DOM 的 documentcreateElement0 和 document.createTextNode0 方 法 创建 
同样 的 表格 ， 代 码 会 非常 元 长 。 在 一 个 性 能 苛刻 的 操作 中 更 新 一 大 块 HTML 页 面 ，innerHTML 在 大 
多 数 浏览 器 中 执行 得 更 快 。 

限于 篇 幅 ， 我 们 把 本 例 代 码 放 在 线 上 呈现 ， 读 者 可 以 查看 本 节 示 例 源 代码 ， 或 者 扫 码 阅读 。 


< 外 注意 : 使 用 innerHTML 属性 也 有 一 些 限制 。 例 如 ， 在 大 多 数 浏览 器 中 ， 通 过 innerHTML 插入 
<scrip 人 > 标记 后 ， 并 不 会 执行 其 中 的 脚本 。 


2. insertAdjacentHTML() 方 法 

插入 HTML 标记 的 另 一 种 新 增 方式 是 insertAdjacentHTML() 方 法 。 这 个 方法 最 早 也 是 在 下 中 出 
| 现 ， 后 来 被 HIMLS 规范 。 

| 浏览 器 支持 状态 : 正 、Firefox 8+、Safari、Chrome 和 Opera。 

| insertAdjacentHTML() 方 法 包含 两 个 参数 : 第 一 个 参数 设置 插入 位 置 ， 第 二 个 参数 传 入 要 插入 的 
| HTML 字符 串 。 第 一 个 参数 必须 是 下 列 值 之 一 。 注 意 ， 这 些 值 都 必须 是 小 写 形式 。 


"beforebegin"， 在 当前 元 素 之 前 插入 一 个 紧邻 的 同辈 元 素 。 

"afierbeginr: 在 当前 元 素 下 插入 一 个 新 的 子 元 素 , 或 在 第 一 个 子 元 素 之 前 再 插入 新 的 子 元 素 。 
"beforeend"， 在 当前 元 素 下 插入 一 个 新 的 子 元 素 ， 或 在 最 后 一 个 子 元 素 之 后 再 插入 新 的 子 
| 元 素 。 


"afterend": 在 当前 元 素 后 插入 一 个 紧邻 的 同辈 元 素 。 
3 回 【示例 2】 下 面 示例 使 用 insertAdjacentHTML0O 方 法 分 别 在 4 个 <div> 标 签 中 插入 
HTML 字符 串 ， 由 于 第 一 个 参数 值 不 同 ， 则 插入 效果 也 不 同 。 

限于 篇 幅 ， 我 们 把 本 例 代码 放 在 线 上 呈现 ， 读 者 可 以 查看 本 节 示例 源 代码 ， 或 者 
扫 码 阅读 。 


线 上 阅读 


12.5.6 ”替换 HTML 字符 串 


outerHTML 也 是 IE 的 私有 属性 , 后 来 被 HTML5 规范 , 与 innerHTML 的 功能 类 似 。 在 读 模 式 下 ， 
| outerHTML 返回 调用 它 的 元 素 及 所 有 子 节点 的 HIML 标签 ， 在 写 模 式 下 ，outerHTML 会 根据 指定 的 
，HTML 字符 串 创建 新 的 DOM 子 树 ， 然 后 用 这 个 DOM 子 树 完全 蔡 换 调 用 元 素 。 
浏览 器 支持 状态 :IE 4+、Firefox 8+、Safari 4+、Chrome 和 Opera 8+、Firefox 7 及 之 前 版 本 不 支 
| 持 outerHTML 属性 。 
【示例 】 下 面 示 例 演示 了 outerHTML 与 innerHTML 属性 的 不 同 效果 。 分 别 为 列表 结构 中 不 同 列 
表 项 定义 一 个 鼠标 单 击 事件 ， 在 事件 处 理 函数 中 分 别 使 用 outerHTML 和 innerHTML 属性 改变 原 列 表 
项 的 HTML 标记 ， 会 发 现 outerHTML 是 使 用 <h2> 蔡 换 <li>， 而 innerHTML 是 把 <h2> 插 入 <li> 中 。 
限于 篇 幅 ， 我 们 把 本 例 代 码 放 在 线 上 呈现 ， 读 者 可 以 查看 本 节 示 例 源 代码 ， 或 者 扫 码 阅读 。 
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12.5.7 插入 文本 


innerText 和 outerText 也 是 正 的 私有 属性 ， 但 是 没有 被 HTML5 纳入 规范 。 由 于 比较 实用 ， Fm | 
简单 介绍 一 下 它们 的 应 用 。 
1. innerText 属性 | 
innerText 在 指定 元 素 中 插入 文本 内 容 ， 如 果 文 本 中 包含 HTML 字符 串 ， 将 被 编码 显示 。 也 可 以 ete 
使 用 该 属性 读 取 指 定 元 素 包 含 的 全 部 嵌 套 的 文本 信息 。 | 
浏览 器 支持 状态 : IE4+、Safari 3+、Chrome 和 Opera 8+。 | 
Firefox 虽然 不 支持 innerText， 但 支持 功能 类 似 的 textContent 属性 。textContent 是 DOM Level 3 | 
规定 的 一 个 属性 ， 支 持 textContent 属性 的 浏览 器 还 有 IE9+、Safari 3+、Opera 10+ 和 Chrome。 
【示例 1】 为 了 兼容 不 同 浏览 器 ， 下 面 自 定义 两 个 工具 函数 来 代 蔡 innerText 属性 的 使 用 。 
function getInnerText(element) { 


Tetum (typeof element.textContent 一 "string") ? | 
elementtextContent : element.innerText: | 
| 


function setInnerText(element, text) { 
if (typeof element.textContent 一 "string") { 
element.textContent = text; 
} else { 
clement.innerText = text; 
E 


} 


这 两 个 函数 接收 一 个 元 素 作为 参数 ， 然 后 检查 这 个 元 素 是 不 是 有 textContent 属性 。 如 果 有 ， 那 
么 typeof element.textContent 应 该 是 "string"; 如 果 没 有 ， 那 么 就 会 改 为 使 用 innerText。 

2. outerText 属性 

outerText 与 innerText 功能 类 似 ， 但 是 它 能 够 覆盖 原 有 的 元 素 。 

【示例 2】 下 面 示 例 使 用 outerText、innerText、outerHTML 和 innerHTML 这 4 
种 属性 为 列表 结构 中 不 同 列表 项 插入 文本 。 

限于 篇 幅 ， 我 们 把 本 例 代码 放 在 线 上 呈现 ， 读 者 可 以 查看 本 节 示 例 源 代码 ,或 者 
扫 码 阅读 。 线 上 阅读 


12.6 文档 片段 


DocumentFragment 节点 代表 一 个 文档 的 片段 , 它 本 身 就 是 一 个 完整 的 DOM 树 形 结构 , 没有 父 节 
点 ,parentNode 返 回 null, 但 是 可 以 插入 任意 数量 的 子 节点 。 它 不 属于 当前 文档 ,操作 DocumentFragment 
节点 ， 要 比 直接 操作 DOM 树 快 得 多 。 

一 般 用 于 构建 一 个 DOM 结构 ,然后 插入 当前 文档 。document.createDocumentFragment() 方 法 ， 以 
及 浏览 器 原生 的 DocumentFragment 构造 函数 ， 可 以 创建 一 个 空 的 DocumentFragment 节点 。 然 后 再 使 
用 其 他 DOM 方法 ， 向 其 添加 子 节点 。 

文档 片段 作用 : 将 文档 片段 作为 节点 “仓库 ”来 使 用 ， 保 存 将 来 可 能 会 添加 到 文档 中 的 节点 。 
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| 多 
创建 文档 片段 的 方法 如 下 。 

| 

| var fragment = document.createDocumentFragmentO); 

| 


4 注意 : 如 果 将 文档 树 中 的 节点 添加 到 文档 片段 中 ,就 会 从 文档 树 中 移 除 该 节点 ， 在 浏览 器 中 也 不 
和 会 再 看 到 该 节点 。 添 加 到 文档 片段 中 的 新 节点 同样 也 不 属于 文档 树 。 


使 用 appendChild0) 或 insertBefore() 方 法 可 以 将 文档 片段 添加 到 文档 树 中 。 在 将 文档 片段 作为 参数 
传递 给 这 两 个 方法 时 , 实际 上 只 会 将 文档 片段 的 所 有 节点 添加 到 相应 位 置 上 , 文档 片段 本 身 永 远 不 会 
成 为 文档 树 的 一 部 分 ， 可 以 把 文档 片段 视 为 一 个 节点 的 临时 容器 。 

【示例 】 每 次 使 用 JavaScript 操作 DOM， 都 会 改变 页 面 呈现 ， 并 触发 整个 页 面 重新 泻 染 ， 从 而 
消耗 系统 资源 。 为 解决 这 个 问题 ， 可 以 先 创建 一 个 文档 片段 ， 把 所 有 的 新 节点 附加 到 文档 片段 上 ， 最 
后 再 把 文档 片段 一 次 性 添加 到 文档 中 ， 减 少 页 面 重 绘 的 次 数 。 

<input type="button" value=" 添 加 项 目 " onclick="addItemsO"> 
ul id"myList"></ul> 


var ul = document.getElementById("myList"); 
var li = pull; 
for(vari=0:i<12:i+H { 
li= document.createElement("li"): 
li.appendChild(document.createTextNode(" 项 目 " + (i+1))); 
fragment.appendChild(li): 
} 
ul.appendChild(fragment): 
i 
</script> 
上 面 示例 准备 为 ul 元 素 添加 12 个 列表 项 如 果 逐 个 添加 列表 项 ,将 会 导致 浏览 器 反复 演 染 页 面 。 
为 避免 这 个 问题 ， 可 以 使 用 一 个 文档 片段 来 保存 创建 的 列表 项 ， 然 后 再 一 次 性 将 它们 添加 到 文档 中 ， 
这 样 能 够 提升 系统 的 执行 效率 。 


12.7 属 性 


| 
HTML 元 素 包括 标签 名 和 若干 个 键 值 对 ， 这 个 键 值 对 就 称 为 “属性 ”attibute)。 属 性 节点 由 Attr 
| 类 型 表示 。 


12.7.1 访问 属性 节点 


Attr 是 Element 的 属性 ， 作 为 一 种 节点 类 型 ， 它 继承 了 Node 类 型 的 属性 和 方法 。 不 过 Attr 没有 
父 节点 ， 同 时 属性 也 不 被 认为 是 元 素 的 子 节点 ， 对 于 很 多 Node 的 属性 来 说 都 将 返回 null。 
Attr 对 象 包含 3 个 专用 属性 ， 简 单 说 明 如 下 。 
| 回 name: 返回 属性 的 名 称 ， 与 nodeName 的 值 相同 。 
J value: 设置 或 返回 属性 的 值 ， 与 nodeValue 的 值 相同 。 


。344 。 


第 12 章 “DO 抬 作 一 ES | 


specified: 如 果 属 性 值 是 在 代码 中 设置 的 ， 则 返回 true; 如 果 为 默认 值 ， 则 返回 false。 
创建 属性 节点 的 方法 如 下 。 


document.createAttribute(name) 


参数 name 表示 新 创建 的 属性 的 名 称 。 | 

限于 篇 幅 ， 我 们 把 演示 示例 放 在 线 上 呈现 ， 读 者 可 以 通过 本 节 示 例 源 代码 ， 或 者 扫 码 快速 模仿 
练习 。 

【拓展 】 

HTML 元 素 对 象 有 一 个 attributes 属性 , 返回 一 个 类 似 数组 的 动态 对 
象 ， 成 员 是 该 元 素 标签 的 所 有 属性 节点 对 象 ， 属 性 的 实时 变化 都 会 反映 
在 这 个 节点 对 象 上 ， 具 体 说 明 请 扫 码 阅读 。 


12.7.2” 读 取 属 性 值 


使 用 元 素 的 getAttribute() 方 法 可 以 快速 读 取 指定 元 素 的 属性 值 ， 传 递 的 参数 是 一 个 以 字符 串 形式 | 
表示 的 元 素 属性 名 称 ， 返 回 的 是 一 个 字符 串 值 ， 如 果 给 定 属性 不 存在 ， 则 返回 的 值 为 null。 
【示例 1】 下 面 示例 访问 红 盒子 和 蓝 盒 子 ， 然 后 读 取 这 些 元 素 所 包含 的 id 属性 值 。 

<div id="red"> 红 盒子 </div> 


Se 
线 上 阅读 1 线 上 阅读 2 


<div id="blue"> 蓝 盒子 </div> 

<script> 

var red = document.getElementById("red"); ” // 获取 红 盒子 

alert(red.getAttribute("id")): // 显示 红 盒子 的 id 属性 值 | 

varblue = document.getElementById("blue"): // 获取 蓝 盒子 | 

alert(blue.getAttribute("id")): // 显示 蓝 盒子 的 id 属性 值 | 

</script> | 
| 


【示例 2】HTML 元 素 节点 的 标准 属性 ( 即 在 标准 中 定义 的 属性 )， 会 自动 成 为 元 素 节点 对 象 的 

属性 。 可 以 使 用 点 语法 快捷 读 取 属性 值 。 

Var red = document.getElementById("red"): 

alert(red.id): 

var blue = document.getElementById("blue"): 

alert(blue.id): 

使 用 点 语法 比较 简便 , 也 获得 所 有 浏览 器 的 支持 。 但 是 , 这 种 用 法 虽然 可 以 读 写 HTML 属性 ， 

但 是 无 法 删除 属性 ，delete 运算 符 在 这 里 不 会 生效 。 


< 负 注意 : HTML 元 素 的 属性 名 是 大 小 写 不 敏感 的 ， 但 是 JavaScript 对 象 的 属性 名 是 大 小 写 敏感 的 。 


转换 规则 是 ， 转 为 JavaScript 属性 名 时 ， 一 律 采用 小 写 。 更 详细 说 明和 演示 示例 请 扫 码 
阅读 。 


线 上 阅读 


| 
| 
| 
| 
人 


12.7.3 ”设置 属性 值 


使 用 元 素 的 setAttribute0 方 法 可 以 设置 元 素 的 属性 值 ， 用 法 如 下 。 
setAttribute(name.value) 
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二 
| 参数 name 和 value 分 别 表示 属性 名 称 和 属性 值 .属性 名 和 属性 值 必须 以 字符 串 的 形式 进行 传递 。 
| 如 果 元 素 中 存在 指定 的 属性 ， 它 的 值 将 被 刷新 ， 如 果 不 存 在 ， 则 setAttribute0 方 法 将 为 元 素 创建 该 属 
| 
| 


性 并 赋值 。 
全 站 | 【示例 1】 下 面 示例 分 别 为 页 面 中 div 元 素 设置 title 属性 。 
vied> 红 盒子 4Jdiv> 
<div id="blue"> 蓝 盒子 </div> 
| <script> 
| var red = document.getElementById("red"): // 获取 红 盒 子 的 引用 
| varblue = document.getElementById("blue"): / 获取 蓝 盒子 的 引用 
red.setAttribute("title", "这 是 红 盒子 "); // 为 红 盒子 对 象 设 置 tile 属性 和 值 
| blue setAttribute("title" "这 是 蓝 盒 子 "); // 为 蓝 盒子 对 象 设置 title 属性 和 值 
| <seaipe 
| 【示例 2】 下 面 示例 定义 了 一 个 文本 节点 和 元 素 节点 ， 并 为 一 级 标题 元 素 设置 title 属性 ， 最 后 把 
| 它们 添加 文档 结构 中 。 
| varhello = document.createTextNode("Hello World! "): // 创建 一 个 文本 节点 
| Var hl = document.createElement("h1"): // 创建 一 个 一 级 标题 
| hl.setAttribute("titde", "你 好 ， 欢 迎 光临 ! "); / 为 一 级 标题 定义 title 属性 
hl.appendChild(hello); / 把 文本 节点 增加 到 一 级 标题 中 
document.body.appendChild(h1):; // 把 一 级 标题 增加 到 文档 中 


【拓展 】 
限于 篇 幅 ， 下 面 还 有 3 个 拓展 示例 ， 放 在 线 上 呈现 ， 读 者 可 以 扫 码 阅读 。 


使 用 元 素 的 removeAttribute0 方 法 可 以 删除 指定 的 属性 ， 用 法 如 下 。 
removeAttribute(name) 


| 参数 name 表示 元 素 的 属性 名 。 
| 【示例 1】 下 面 示例 演示 了 如 何 动 态 设置 表格 的 边框 。 
| <script> 
window.onload = fonctionO { / 绑 定 页 面 加 载 完毕 时 的 事件 处 理 函 数 
| vartable = document.getElementsByTagName("table")[0]: // 获取 表格 外 框 的 引用 
| var del = document.getElementById("del"); 。 // 获取 “删除 ”按钮 的 引用 
| var reset = document.getElementById("reset"); // 获取 “恢复 ”按钮 的 引用 


del.onclick = functionO { // 为 “删除 ”按钮 绑 定 事件 处 理 函 数 
table.removeAttribute("border"): // 移出 边框 属性 
} 
| reset.onclick = fonction0 { / 为 “恢复 ”按钮 绑 定 事件 处 理 函数 
| table.setAttribute("border", "2"): / 设置 表格 的 边框 属性 
| } 
| 
| </script> 
| <table width="100%" border="2"> 


| <t> 
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<td> 数 据 表格 <Jtd> | 

</tr> | 

</table> | 
<button id="del"> 删 除 </button><button id="reset"> 恢 复 </button> 


在 上 面 示例 中 ,设计 了 两 个 按钮 ， 并 分 别 绑 定 不 同 的 事件 处 理 函数 。 单 击 “ 删 除 ”按钮 即 可 调用 | 
表格 的 removeAttribute0 方 法 清除 表格 边框 ， 单 击 “ 恢 复 ” 按 钮 即 可 调用 表格 的 setAttribute0 方 法 重 | 
新 设置 表格 边框 的 粗细 。 

【示例 2】 下 面 示例 演示 了 如 何 自 定义 删除 类 函数 ， 并 调用 该 函数 删除 指定 类 名 。 

限于 篇 幅 ， 本 示例 代码 放 在 线 上 呈现 ， 读 者 可 以 查看 本 节 示 例 源 代 码 ， 或 者 扫 码 


12.7.5 ”使 用 类 选择 器 


HTML5 为 document 对 象 和 HTML 元 素 新 增 了 getElementsByClassName() 方 法 , 使 用 该 方法 可 以 | 
选择 指定 类 名 的 元 素 。getElementsByClassName() 方 法 可 以 接收 一 个 字符 串 参 数 ， 包 含 一 个 或 多 个 类 | 
名 ， 类 名 通过 空格 分 隔 ， 不 分 先后 顺序 ， 方 法 返回 带 有 指定 类 的 所 有 元 素 的 NodeList。 | 

浏览 器 支持 状态 : IE 9+、Firefox 3.0+、Safari 3+、Chrome 和 Opera 9.5+。 

如 果 不 考虑 兼容 早期 下 浏览 器 或 者 怪异 模式 ， 用 户 可 以 放心 使 用 。 | 

【示例 1】 下 面 示例 使 用 documentgetElementsByClassName("red") 方 法 选择 文档 中 所 有 包含 red | 
类 的 元 素 。 | 
<div class="red"> 红 盒子 </div> 
<div class="blue red"> 蓝 盒子 </div> 
<div class="green Ted"> 绿 盒子 </div> 
<script> 
var divs = document.getElementsByClassName("red"); 
for(var i= 0: i<divs.length: i++) { 
console.log(divs[i].innerHTML): 
bh 
script> 
【示例 2】 下 面 示例 使 用 document.getElementById("box") 方 法 先 获 取 <div id="box">, 然后 在 它 下 
面 使 用 getElementsByClassName("blue red") 选 择 同时 包含 red 和 blue 类 的 元 素 。 
<div id="box"> 
<div class="blue red green">blue red green</div> 
<div> 
<div class="blue red black">blue red black</div> 
<script> 
var divs = document.getElementById("box").getElementsByClassName("blue red"): 
for(var 二 0: i<divs.length:it+) { 
console.log(divs[i].innerHTML): 
</script> 

在 document 对 象 上 调用 getElementsByClassName0 会 返回 与 类 名 匹配 的 所 有 元 素 , 在 元 素 上 调用 

该 方法 就 只 会 返回 后 代 匹 配 的 元 素 。 
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| 12.7.6” 自 定义 属性 


a HTMLS 允许 用 户 为 元 素 自 定 义 属性 ， 但 要 求 添加 data- 前 级 ， 目 的 是 为 元 素 提供 与 渲染 无 关 的 附 
短 []】 加 信息 ， 或 者 提供 语义 信息 。 例 如 : 

<div id="box" data-myid="12345" data-myname="zhangsan” data-mypass="zhang123"> 自 定义 数据 属性 </div> 
| 添加 自 定义 属性 之 后 ， 可 以 通过 元 素 的 dataset 属性 访问 自 定义 属性 。dataset 属性 的 值 是 一 个 
| DOMStringMap 实例 ， 也 就 是 一 个 名 值 对 的 映射 。 在 这 个 映射 中 ， 每 个 data-name 形式 的 属性 都 会 有 
| 一 个 对 应 的 属性 ， 只 不 过 属性 名 没有 data- 前 级 。 

浏览 器 支持 状态 : Firefox 6+ 和 Chrome。 

【示例 】 下 面 代码 演示 了 如 何 自 定义 属性 ， 以 及 如 何 读 取 这 些 附 加 信息 。 

var div = document. getElementById("box"):; 

// 访问 自 定义 属性 值 

| varid=divdatasetmyid; 

| Varname = div.dataset.myname; 

| Varpass = div.dataset.mypass: 

// 重 置 自 定义 属性 值 
divdatasetmyid ="54321": 

| div.dataset.myname = "lisi"; 

| div.dataset.mypass = "lisi543"; 

| // 检测 自 定义 属性 

| 让 (divdatasetmyname) { 

alert(div.dataset.myname): 

| 由 

| 

| 虽然 上 述 用 法 未 获得 所 有 浏览 器 支持 ， 但 是 我 们 仍然 可 以 使 用 这 种 方式 为 元 素 添加 自 定义 属性 ， 

| 然后 使 用 getAttribute() 方 法 读 取 元 素 附加 的 信息 。 


12.8 CSS 选择 器 


| Selectors API 是 由 W3C 发 起 制定 的 一 个 标准 ， 致 力 于 让 浏览 器 原生 支持 CSS 查询 。DOMAPI 模 
| 块 核心 是 两 个 方法 : querySelector0 和 querySelectorAll0)， 这 两 个 方法 能 够 根据 CSS 选择 器 规范 , 便 
| 捷 定位 文档 中 指定 元 素 。 
| 浏览 器 支持 状态 : IE 8+、 Firefox、 Chrome、Safari、Opera。 
| Document、DocumentFragment、Element 都 实现 了 NodeSelector 接口 。 即 这 3 种 类 型 的 节点 都 拥 
有 querySelector0 和 querySelectorAll0 方 法 。 
| querySelector() 和 querySelectorAll0 方 法 的 参数 必须 是 符合 CSS 选择 器 规范 的 字符 串 ， 不 同 的 是 
| querySelector0 方 法 返回 的 是 一 个 元 素 对 象 ，querySelectorAll0 方 法 返回 的 是 一 个 元 素 集合 。 
| 【示例 1】 新 建 网 页 文档 ， 输 入 下 面 HTML 结构 代码 。 
<div class="content"> 

<u> 
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<I 记 首页 </li> 

<li class="red"> 财 经 </li> 
<li class="blue"> 娱 乐 </li> 
<li class="red"> 时 尚 </li> 


< dlass="blue"> 互 联网 <li> | 


<ul> 
</div> 


如 果 要 获得 第 一 个 二 元 素 ， 可 以 使 用 如 下 方法 。 
document.querySelector(".content ul li"): | 
如 果 要 获得 所 有 上 二 元 素 ， 可 以 使 用 如 下 方法 。 
document.querySelectorAll(".content ul 1i"); | 
如 果 要 获得 所 有 class 为 red 的 下 元 素 ， 可 以 使 用 如 下 方法 。 
document.querySelectorAll("lired"): 


这 提示 : DOM API 模块 也 包含 getElementsByClassName() 方 法 ,使 用 该 方法 可 以 获取 指定 类 名 的 元 
素 。 例 如 : 
document.getElementsByClassName("red"); 


< 注意 : getElementsByClassName() 方 法 只 能 够 接收 字符 串 ， 且 为 类 名 ， 而 不 需要 加 点 号 前 级， 如 
果 没 有 匹配 到 任何 元 素 则 返回 空 数组 。 


CSS 选择 器 是 一 个 便捷 的 确定 元 素 的 方法 ， 这 是 因为 大 家 已 经 对 CSS 很 熟悉 了 。 当 需要 联合 查 
询 时 ， 使 用 querySelectorAll0 更 加 便利 。 
【示例 2】 在 文档 中 一 些 1i 元 素 的 class 名 称 是 red， 另 一 些 class 名 称 是 blue， 可 以 用 query 
SelectorAll0 方 法 一 次 性 获得 这 两 类 节点 。 
Var lis = document.querySelectorAll("li.red. li.blue"): 


如 果 不 使 用 querySelectorAll0 方 法 ， 那 么 要 获得 同样 列表 ， 需 要 更 多 工作 。 一 个 办 法 是 选择 所 有 
的 五 元 素 ， 然 后 通过 迭代 操作 过 滤 出 那些 不 需要 的 列表 项 目 。 

var result = []. lisl = document.getElementsByTagName(li). classname ="; 
for(vari=0. len= lisl.length: i<len: i++) { 

classname = lisl[i].className: 

这 classname 一 = red | classname 一 一 blue) { 

result push(lis1 [i]): 
} 


| 


比较 上 面 两 种 不 同 的 用 法 ， 使 用 选择 器 querySelectorAll(0 方 法 比 使 用 getElementsByTagName() 的 
性 能 要 快 很 多 。 因 此 ， 如 果 浏 览 器 支持 document.querySelectorAll0， 那 么 最 好 使 用 它 。 | 
在 Selectors API 2 版 本 规范 中 , 为 Element 类 型 新 增 了 一 个 方法 matchesSelector0。 这 个 方法 接收 | 
一 个 参数 ， 即 CSS 选择 符 ， 如 果 调用 元 素 与 该 选择 符 匹配 ， 返 回 tme; 否则 ， 返 回 false。 目 前 浏览 | 
器 对 其 支持 不 是 很 好 。 | 
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129 范 国 


DOM2 在 遍历 和 范围 模块 中 定义 了 范围 接口 。 通过 范围 可 以 选择 文档 中 的 一 个 区 域 , 而 不 用 考虑 
节点 的 界限 。 在 常规 DOM 操作 中 不 能 更 有 效 地 修改 文档 时 ， 使 用 范围 往往 可 以 达到 目的 。 

| Firefox、Opera、Safari 和 Chrome 都 支持 DOM 范围 ，IE8 及 其 早期 版 本 不 支持 标准 的 用 法 ， 但 
是 提供 专 有 方法 实现 对 范围 的 支持 。 


加 | 这 提示 : 考虑 到 在 初 公开 发 阶 役 ， 范 轩 不 是 很 带 用 ， 因 此 末节 仅 作为 选 学 内 容 供 东 考 。 
$ | 12.9.1 创建 范围 


document 对 象 定 义 了 createRange0 方 法 ， 使 该 方法 可 以 创建 范围 。 
限于 篇 幅 ， 本 节 演 示 示 例 可 以 查看 示例 源 代码 ， 或 者 扫 码 阅读 。 


,12.9.2 选择 范围 


创建 范围 之 后 ， 可 以 使 用 范围 来 选择 文档 中 的 一 部 分 。 其 中 最 简 的 方式 就 是 使 用 selectNode0 或 
线 上 阅读 | selectNodeContents() 方 法 。 
限于 篇 幅 ， 本 节 演示 示例 可 以 查看 示例 源 代 码 ， 或 者 扫 码 阅读 。 


12.9.3 设置 范围 


创建 复杂 的 范围 一 般 使 用 setStart0 和 setEnd0 方 法 。 
限于 篇 幅 ， 本 节 演 示 示 例 可 以 查看 示例 源 代码 ， 或 者 扫 码 阅读 。 


12.9.4 ”操作 范围 内 容 


范围 实际 上 也 是 一 个 文档 片段 。 创建 范围 后 ， 其 内 全 部 节点 都 被 添加 这 个 文档 片段 中 ， 并 会 自动 
| 补 全 开始 标签 和 结束 标签 ， 重 构 有 效 的 DOM 结构， 以 方便 用 户 对 其 进行 操作 。 
民 于 篇 幅 ， 本 节 演 示 示 例 可 以 查看 示例 源 代 码 ， 或 者 扫 码 阅读 。 


12.9.5 ”插入 范围 内 容 


使 用 insertNode0 方 法 可 以 向 范围 开始 位 置 插入 节点 ， 该 方法 包含 一 个 参数 ， 要 插入 的 节点 。 
民 于 篇 幅 ， 本 节 演 示 示 例 可 以 查看 示例 源 代码 ， 或 者 扫 码 阅读 。 


12.9.6 ”折叠 范围 


折 对 范围 就 是 指 范围 中 没有 选择 任何 内 容 。 使 用 collapse0 方 法 可 以 折 印 范 
恨 于 篇 幅 ， 本 节 演 示 示 例 可 以 查看 示例 源 代码 ， 或 者 扫 码 阅读 。 
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12.9.7 ”比较 范围 


使 用 compareBoundaryPoints0 方 法 可 以 比较 两 个 范围 的 位 置 ， 以 确定 范围 之 间 是 否 有 公共 的 边界 ， | 线 上 ps 
如 起 点 或 终点 。 | 

限于 篇 幅 ， 本 节 演 示 示 例 可 以 查看 示例 源 代 码 ， 或 者 扫 码 阅读 。 
12.9.8 ”复制 和 清除 范围 

使 用 cloneRange0 方 法 可 以 复制 范围 ， 新 创建 的 范围 与 原来 的 范围 包含 相同 的 属性 ， 而 修改 它 的 
边界 不 会 影响 原来 的 范围 。 

限于 篇 幅 ， 本 节 演 示 示 例 可 以 查看 示例 源 代码 ， 或 者 扫 码 阅读 。 


12.10 案例 实战 


| 线 上 阅读 


本 节 将 通过 多 个 实例 介绍 如 何 灵活 应 用 DOM， 以 便 优化 代码 ， 提 升 运行 效率 。 
12.10.1 异步 加 载 远 程 数 据 


script 元 素 能 够 动态 加 载 外 部 或 远程 JavaScript 脚本 文件 。JavaScript 脚本 文件 不 仅仅 可 以 被 执 
行 ， 还 可 以 附加 数据 。 在 服务 器 端 使 用 JavaScript 文件 附加 数据 后 ， 当 在 客户 端 使 用 script 元 素 加 载 
这 些 远 程 脚本 时 ， 附 加 在 JavaScript 文件 中 的 信息 也 一 同 被 加 载 到 客户 端 ， 从 而 实现 数据 异步 加 载 的 
目的 。 | 

下 面 介绍 如 何 使 用 script 元 素 设计 异步 交互 接口 ， 动 态 生成 script 元 素 。 通 过 script 元 素 实施 异 
步 交互 功能 的 封装 ， 这 样 就 避免 了 每 次 实施 异步 交互 时 都 需要 手动 修改 文档 结构 的 麻烦 。 

限于 篇 幅 ， 本 节 案 例 的 源 代 码 和 讲解 过 程 请 扫 码 阅读 。 


12.10.2 ”使 用 script 设计 异步 交互 


使 用 script 元 素 作为 异步 通信 的 工具 时 ， 实 现 信息 交换 的 最 简单 的 方法 就 是 使 用 参数 作为 从 客户 | 
端 向 服务 器 端 传递 信息 ， 这 种 在 URL 中 附加 参数 的 方式 是 最 快捷 的 方法 ， 然 后 服务 器 端 接收 这 些 参 
数 ， 并 把 响应 信息 以 JavaScript 脚本 形式 传 回 客户 端 。 

限于 篇 幅 ， 本 节 案 例 的 源 代码 和 讲解 过 程 请 扫 码 阅读 。 


12.10.3 ”使 用 JSONP 异步 通信 


JSONP 是 JSON with Padding 的 简称 ， 它 能 够 通过 在 客户 端 文档 中 生成 脚本 标记 (<script 标签 ) | 
来 调用 跨 域 脚本 服务 器 端 脚本 文件 ) 时 使 用 的 约定 ， 这 是 一 个 非 官方 的 协议 。 | 
JSONP 人 允许 在 服务 器 端 动态 生成 JavaScript 字符 串 返回 给 客户 端 ， 通 过 JavaScript 回调 函数 的 形 
式 实现 跨 域 调用 。 现 在 很 多 JavaScript 技术 框架 都 使 用 JSONP 实现 跨 域 异步 通信 ， 如 dojo、JQuery、 
Youtube GData API、Google Social Graph API、Digg API 等 。 
限于 篇 幅 ， 本 节 案 例 的 源 代 码 和 讲解 过 程 请 扫 码 阅读 。 
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12.10.4 访问 DOM 集合 


| 
HTML 集合 是 用 于 存放 DOM 节点 引用 的 类 数组 对 象 。 下 列 方法 的 返回 值 都 是 一 个 集合 。 
全 六 | document.getElementsByName()。 
mm | document.getElementsByClassName()。 
回 document.getElementsByTagName()。 
| 下 列 属性 也 属于 HTML 集合 : 
document.images: 页 面 中 所 有 的 <img> 元 素 。 
加 ”document.links: 所 有 的 <a> 元 素 。 
回 documentforms: 所 有 表单 。 
加 ”document.forms[0].elements: 页 面 中 第 一 个 表单 的 所 有 字段 。 
限于 篇 幅 ， 本 节 案 例 的 源 代码 和 讲解 过 程 请 扫 码 阅读 。 


* 12.10.5 编辑 选择 文本 


| 
| 本 例 使 用 JavaScript 实现 在 网 页 中 选中 文本 ， 弹 出 提示 图 标 ， 允 许 用 户 把 选中 的 文本 分 享 到 新 浪 
| 微 博 。 

限于 篇 幅 ， 本 节 案 例 的 源 代码 和 讲解 过 程 请 扫 码 阅读 。 
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事件 是 一 种 异步 编程 的 实现 方式 ， 本 质 上 是 程序 各 个 组 成 部 分 之 间 的 通信 。DOM 支持 


大 量 的 事件 ， 本 章 将 介绍 DOM 事件 的 编程 基础 


【 学 习 重点 】 

站 了 解 事件 模型 

能 金正 确 注 册 、 监 听 事 件 
能 够 自 定义 事件 

熟悉 和 使 用 不 同类 型 的 事件 


各 吾 吾 


/swt 网页 编程 从 入 门 到 精通 ( 答 课 精 编 县 ) 
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本 节 将 简单 介绍 JavaScript 事件 的 基本 概念 和 使 用 。 
' 13.1.1 JavaScript 事件 发 展 历史 


最 早 在 下 3.0 和 Netscape 2.0 浏览 器 中 出 现 事件 。 互 联网 初期 网 速 非常 慢 ， 为 了 解决 用 户 漫长 的 
| 等待， 开发 人 员 把 服务 器 端 处 理 的 任务 部 分 前 移 到 客户 端 ， 让 客户 端 JavaScript 脚本 代 蔡 解决 。 

例如 ， 对 用 户 输入 的 表单 信息 进行 验证 等 ， 于 是 就 出 现 各 种 响应 用 户 行为 的 事件 ， 如 表单 提交 事 
件 、 文 本 输入 时 键盘 事件 、 文 本 框 中 文本 发 生变 化 触发 的 事件 、 选 择 下 拉 菜 单 时 引发 的 事件 等 。 因此 ， 
早期 的 事件 多 集中 在 表单 应 用 上 。 

DOM 2 规范 开始 尝试 标准 化 DOM 事件 , 直到 2004 年 发 布 DOM 3.0 时 , W3C 才 完善 事件 模型 。 
下 9、Fircfox、Opera、Safari 和 Chrome 主流 浏览 器 都 已 经 实现 了 DOM 2 事件 模块 的 核心 部 分 。IE 8 
及 其 早期 版 本 使 用 IE 私有 的 事件 模型 。 

JavaScript 是 以 事件 驱动 实现 页 面 交 互 ， 事 件 驱动 的 核心 : 以 消息 为 基础 ， 以 事件 来 驱动 。 通 俗 
说 ,事件 就 是 文档 或 浏览 器 窗口 中 发 生 的 一 些 特定 交互 行为 ， 如 加 载 、 单 击 、 输 入 、 选 择 等 。 可 以 使 
用 侦 听 器 预订 事件 ， 即 在 特定 事情 上 绑 定 事件 监听 函数 ， 以 便 在 事件 发 生 时 执行 相应 的 代码 。 当 事件 
发 生 时 ， 浏 览 器 会 自动 生成 事件 对 象 (event)， 并 沿 着 DOM 节点 有 序 进 行 传播 ， 直 到 被 脚本 捕获 。 
这 种 观察 员 模式 确保 JavaScript 与 HTML 保持 松散 的 耦合 。 


13.1.2 事件 模型 


在 浏览 器 发 展 历史 中 ， 出 现 4 种 事件 处 理 模型 。 

基本 事件 模型 : 也 称 为 DOM 0 事件 模型 ， 是 浏览 器 初期 出 现 的 一 种 比较 简单 的 事件 模型 ， 
主要 通过 事件 属性 ， 为 指定 标签 绑 定 事件 监听 函数 。 由 于 这 种 模型 应 用 比较 广泛 ， 获 得 所 有 
浏览 器 的 支持 ， 目 前 依然 比较 流行 。 但 是 这 种 模型 对 于 HTML 文档 标签 依赖 严重 ， 不 利于 
JavaScript 独立 开发 。 

DOM 事件 模型 : 由 W3C 制订 ， 是 目前 标准 的 事件 处 理 模型 。 所 有 符合 标准 的 浏览 器 都 支 

持 该 模型 ，IE 怪异 模式 不 支持 。DOM 事件 模型 包括 DOM 2 事件 模块 和 DOM 3 事件 模块 ， 

DOM 3 事件 模块 为 DOM 2 事件 模块 的 升级 版 ， 略 有 完善 ， 主 要 是 新 增 了 一 些 事情 类 型 ， 以 

适应 移动 设备 的 开发 需要 ， 但 大 部 分 规范 和 用 法 保持 一 致 。 

正 事件 模型 : 正 4.0 及 其 以 上 版 本 浏览 器 支持 ， 与 DOM 事件 模型 相似 ， 但 用 法 不 同 。 

Netscape 事件 模型 : 由 Netscape 4 浏览 器 实现 ， 在 Netscape 6 中 停止 支持 。 


13.1.3， 事 件 传播 
回 | 


搞 频 讲解 | 当 一 个 事件 发 生 以 后 ， 它 会 在 不 同 的 DOM 节点 之 间 传播 ， 也 称 为 事件 流 。 这 种 传播 分 成 三 个 阶 
| 段 ， 具 体 说 明 如 下 。 
| 捕获 阶段 : 事件 从 window 对 象 沿 着 文档 树 向 下 传播 到 目标 节点 ， 如 果 目 标 节点 的 任何 一 个 
| 上 级 节点 注册 了 相同 事件 , 那么 事件 在 传播 的 过 程 中 就 会 首先 在 最 接近 顶部 的 上 级 节点 执行 ， 


图 加 
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依次 向 下 传播 。 
目标 阶段 : 注册 在 目标 节点 上 的 事件 被 执行 。 | 
冒 泡 阶段 : 事件 从 目标 节点 向 上 触发 ， 如 果 上 级 节点 注册 了 相同 的 事件 ， 将 会 逐 级 响应 , 依 | 
次 向 上 传播 。 | 
事件 传播 的 最 上 层 对 象 是 window， 接 着 依次 是 document、html (document.documentElement) 和 | 
body (document.dody)。 也 就 是 说 ， 如 果 <body> 元 素 中 有 一 个 <div> 元 素 ， 单 击 该 元 素 。 事 件 的 传播 
顺序 , 在 捕获 阶段 依次 为 window、document、html、body、div, 在 冒 泡 阶 段 依次 为 div、body、html、 
document、window。 


关于 事件 流 的 演示 示例 代码 和 不 同 阶 段 响应 的 比较 效果 ， 请 扫 码 阅读 。 
13.1.4 事件 类 型 线 上 阅读 


根据 触发 对 象 不 同 ， 可 以 将 浏览 器 中 发 生 的 事件 分 成 不 同 的 类 型 。DOM 0 事件 定义 了 以 下 事件 | 
类 型 。 

鼠标 事件 : 与 鼠标 操作 相关 的 各 种 行为 ,可 以 细 分 为 两 类 :跟踪 鼠标 当前 定位 (如 mouseover、 

mouseout) 的 事件 和 跟踪 鼠标 单 击 ( 如 mouseup、mousedown、click〉 的 事件 。 

键盘 事件 : 与 键盘 操作 相关 的 各 种 行为 ,包括 追踪 键盘 敲 击 和 其 上 下 文 ， 追踪 键盘 包括 3 种 

类 型 ，keyup、keydown 和 keypress。 

页 面 事 件 ， 关 于 页 面 本 身 的 行为 ， 如 当 首 次 载 入 页 面 时 触发 load 事件 和 离开 页 面 时 触发 
unload 和 beforeunload 事件 。 此 外 ，JavaScript 的 错误 使 用 错误 事件 追踪 ， 可 以 让 用 户 独立 
处 理 错误 。 

UI 事件 : 追踪 用 户 在 页 面 中 的 各 种 行为 ， 如 监听 用 户 在 表单 中 输入 ， 可 以 通过 focus (获得 
焦点 ) 和 blur( 失 去 焦点 ) 两 个 事件 ， 如 submit 事件 用 来 追踪 表单 的 提交 ，change 事件 监 
听 用 户 在 文本 框 中 的 输入 ， 而 select 事件 可 以 监听 下 拉 菜 单 发 生 更 新 等 。 

在 DOM 2 事件 模型 中 ， 事 件 模块 包含 4 个子 模块 ， 每 个 子 模块 提供 对 某 类 事件 的 支持 。 例 如 ， 
MouseEvent 子 模块 提供 了 对 mousedown、mouseup、mouseover、mouseout 和 click 事件 类 型 的 支持 。 
包括 正 9 在 内 的 所 有 主流 浏览 器 都 支持 DOM 2 事件 类 型 。 

HTMLEvents: 接口 为 Event, 支持 的 事件 类 型 包括 abort、 blur、change、error、focus、load、 

resize、scroll、select、submit、unload。 

MouseEvents: 接口 为 MouseEvent， 支 持 的 事件 类 型 包括 click、mousedown、mousemove、 

mouseout、mouseover、mouseup。 

UIEvents: 接口 为 UIEvent， 具 体 支持 事件 类 型 请 扫 码 了 解 。 

MutationEvents: 接口 为 MutationEvent， 具 体 支 持 事件 类 型 请 扫 码 了 解 。 

【拓展 】 

DOM 2 类 型 分 类 说 明 请 扫 码 了 解 。 3 

HTMLEvents 和 MouseEvents 模块 定义 的 事件 类 型 与 基础 事件 模型 中 的 事件 类 型 相似 ，UIEvents | 国 
模块 定义 的 事件 类 型 与 HTML 表单 元 素 的 支持 的 获得 焦点 、 失 去 焦点 和 单 击 事件 功能 类 似 ， 
MutationEvents 模块 定义 的 事件 是 在 文档 改变 时 生成 的 ， 一 般 不 常用 。 


13.1.5 “ 绑 定 事件 
在 基本 事件 模型 中 ，JavaScript 支持 两 种 绑 定 方式 。 


加 
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1. 静态 绑 定 

| 把 JavaScript 脚本 作为 属性 值 ， 直 接 赋予 事 件 属性 。 

| 【示例 1】 在 下 面 示例 中 ， 把 JavaScript 脚本 以 字符 串 的 形式 传递 给 onclick 属性 ， 为 <button> 标 
同 内 。。 签 包 定 lick 事件 。 当 单 击 按钮 时 ， 就 会 触发 click 事件 ， 执 行 这 行 JavaSeript 脚本 。 


Wesel <button onclick="alert( 你 单 击 了 一 次 ! ):"> 按 钮 <button> 
Note 
| 2. 动态 绑 定 

使 用 DOM 对 象 的 事件 属性 进行 赋值 。 

【示例 2】 在 下 面 示例 中 ， 使 用 document.getElementById0 方 法 获取 button 元 素 ， 然 后 把 一 个 匿 
名 函数 作为 值 传递 给 button 元 素 的 onclick 属性 ， 实 现 事件 绑 定 操作 。 

<button id="btn"> 按 钮 </button> 

<script> 

Var button = document.getElementById("btn"): 

button.onclick = functionO| { 

alert(" 你 单 击 了 一 次 ! "); 

</sctip> 
| 这 种 方法 可 以 在 脚本 中 直接 为 页 面 元 素 附 加 事件 ， 不 破坏 HTML 结构 ， 比 上 一 种 方式 灵活 。 
“13.1.6 ”事件 监听 函数 


| 监听 函数 (listener) 是 事件 发 生 时 ， 程 序 所 要 执行 的 函数 。 它 是 事件 驱动 编程 模式 的 主要 编程 方 
| 式 。 监 听 函 数 有 时 也 称 为 事件 处 理 函 数 或 事件 处 理 器 。 
DOM 提供 3 种 方法 ， 可 以 用 来 为 事件 绑 定 监听 函数 ， 具 体 说 明 如 下 。 
1. HTML 标签 的 on- 属 性 
HTML 语言 允许 在 元 素 标签 的 属性 中 ， 直 接 定 义 某 些 事件 的 监听 代码 。 
【示例 1】 在 下 面 示例 中 ， 为 form 元 素 的 onsubmit 事件 属性 定义 字符 串 脚 本 ， 设 计 当 文本 框 中 
输入 值 为 空 时 , 定义 事件 监听 函数 返回 值 为 false。 由 于 该 返回 值 为 false, 将 强制 表单 禁止 提交 数据 。 
<form id="forml" name="forml" method="post" action="http:// www.mysite.cn/"onsubmit="if(this.elements[0]. 
value.length 一 0) return false:"> 
姓名 : <input id="user" name="user" type="text" /> 
| <input type="submit" name="btn" id="btn" value=" 提 交 " /> 
| </form> 
在 上 面 代码 中 ,this 表示 当前 form 元 素 ,elements[0] 表 示 姓 名 文本 框 ,如 果 该 文本 框 的 value.length 
| ”属性 值 长 度 为 0， 表示 当前 文本 框 为 室 ， 则 返回 false， 禁 止 提交 表单 。 


而 注意 : 使 用 这 个 方法 指定 的 监听 函数 ， 只 会 在 冒 泡 阶段 触发 。 同 时 ，on- 属 性 的 值 是 将 会 执行 的 
| 代码 ， 而 不 是 一 个 函数 。 例 如 : 

| zi 正确 二 > 

<body onload="doSomething0"> 

<!-- 错误 -> 

| <body onload="doSomething"> 
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一 旦 指定 的 事件 发 生 ，on- 属 性 的 值 是 原样 传 入 JavaScript 引擎 执行 。 因此 如 果 要 执行 函数 ， 不 要 
忘记 加 上 一 对 圆 括号 。 
另外 ，Element 元 素 节 点 的 setAttribute0 方 法 ， 其 实 设置 的 也 是 这 种 效果 。 例 如 : 


el.setAttribute('onclick'. doSomethingO"): 


次 提示 : 事件 监听 函数 不 需要 参数 。 在 DOM 事件 模型 中 , 事件 监听 函数 默认 包含 event 参数 对 象 ， 
event 对 象 包含 事件 信息 ， 在 函数 内 进行 传播 。 


事件 监听 函数 一 般 没有 明确 的 返回 值 。 不 过 在 特定 事件 中 , 用 户 可 以 利用 事件 监听 函数 的 返 
影响 程序 的 执行 ， 如 单 击 超 链接 时 ， 禁 止 默 认 的 跳 转行 为 ， 如 上 面 示例 。 


2. Element 节点 的 事件 属性 


Element 节点 对 象 有 事件 属性 ， 同 样 可 以 指定 监听 函数 。 使 用 这 个 方法 指定 的 监听 函数 ， 只 会 在 | 
冒 泡 阶段 触发 。 

【示例 2] 在 本 示例 中 , 为 按钮 对 象 绑 定 一 个 单 击 事件 。 在 这 个 事件 监听 函数 中 , 参数 e 为 形 参 ， 
响应 事件 之 后 ， 浏 览 器 会 把 event 对 象 传递 给 形 参 变量 e， 再 把 event 对 象 作 为 一 个 实 参 进行 传递 ， 
读 取 event 对 象 包含 的 事件 信息 ， 在 事件 监听 函数 中 输出 当前 源 对 象 节点 名 称 ， 显 示 效 果 如 图 13.1 | 
所 示 。 | 
<button id="btn"> 按 钮 </button> | 
<script> | 
var button = document.getElementById("btn"): | 
button.onclick = fnnction(e) { | 

| 
| 
| 
| 


互 


值 


vare=ellwindowevent: 。“// 兼容 DOM 事件 模型 和 正 模型 的 event 获取 方式 
document.write(e.srcElement ? e.srcElement : e.target): 
// 兼容 DOM 事件 模型 和 正 模型 的 event 属性 
} | 
</script> | 


¢ 3? ET € | ET 


[object HTMLButtonElement] 


图 13.1 捕获 当前 事件 源 

在 处 理 event 参数 时 ， 应 该 判断 event 在 当前 解析 环境 中 的 状态 ， 如 果 当 前 浏览 器 支持 ， 则 使 用 
event (DOM 事件 模型 )， 如 果 不 支持 ， 则 说 明 当 前 环境 是 正 浏览 器 ， 通 过 window.event 获取 event | 
对 象 。 

event.srcElement 表示 当前 事件 的 源 ， 即 响应 事件 的 当前 对 象 ， 这 是 正 模型 用 法 。 但 是 DOM 事 
件 模 型 不 支持 该 属性 ， 需 要 使 用 event 对 象 的 target 属性 ， 它 是 一 个 符合 标准 的 源 属性 。 为 了 能 够 兼 
容 不 同 浏览 器 ， 这 里 使 用 了 一 个 条 件 运算 符 ， 先 判断 event.srcElement 属性 是 否 存在 ， 否 则 使 用 
event.target 属性 来 获取 当前 事件 对 象 的 源 。 

3. addEventListener() 方 法 


通过 Element 节点 、document 节点 、window 对 象 的 addEventListener0 方 法 ， 也 可 以 定义 事件 的 
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| 监听 函数 ， 将 在 13.1.7 节 详细 讲解 。 

在 上 面 3 种 方法 中 , 第 一 种 方法 违反 了 HTML 与 JavaScript 代码 相 分 离 的 原则 ; 第 二 种 的 缺点 是 
同一 个 事件 只 能 定义 一 个 监听 函数 ， 也 就 是 说 ， 如 果 定 义 两 次 onclick 属性 ， 后 一 次 定义 会 覆盖 前 一 

国内 ， 次 -因此 ,这 两 种 方法 都 不 推荐 使 用 , 除非 是 为 了 程序 的 兼容 问题 , 因为 所 有 浏览 吕 都 支持 这 两 各 方法 。 

一， addEventListener0 是 推荐 的 指定 监听 函数 的 方法 ， 它 有 如 下 优点 。 
可 以 针对 同一 个 事件 ， 添 加 多 个 监听 函数 。 
| 能 够 指定 在 哪个 阶段 捕获 阶段 还 是 冒 泡 阶段 触发 监听 函数 。 

回 除了 DOM 节点 ， 还 可 以 部 署 在 window、XMLHttpRequest 等 对 象 上 面 ， 等 于 统一 了 整个 

JavaScript 的 监听 函数 接口 。 

【拓展 】 

在 实际 编程 中 ， 监 听 函 数 内 部 的 this 对 象 ， 常 常 需要 指向 触发 事件 的 那个 Element 
节点 。 但 是 如 果 使 用 第 一 种 方法 ，this 将 指向 window 对 象 ， 如 何 解决 这 个 问题 ， 请 扫 
码 阅读 。 


13.1.7 ”注册 事件 


在 DOM 事件 模型 中 ， 通 过 调用 对 象 的 addEventListener0 方 法 注册 事件 ， 用 法 如 下 。 

element.addEventListener(String type, Function listener boolean useCapture): 

| 参数 说 明 如 下 。 

| type: 注册 事件 的 类 型 名 。 事 件 类 型 与 事件 属性 不 同 ， 事 件 类 型 名 没有 on 前 级 。 例 如 ， 对 
于 事件 属性 onclick 来 说 ， 所 对 应 的 事件 类 型 为 click。 

listener: 监听 函数 ， 即 事件 监听 函数 。 在 指定 类 型 的 事件 发 生 时 将 调用 该 函数 。 在 调用 这 个 
函数 时 ， 默 认 传递 给 它 的 唯一 参数 是 event 对 象 。 

useCapture: 是 一 个 布尔 值 。 如 果 为 true， 则 指定 的 事件 监听 函数 将 在 事件 传播 的 捕获 阶段 
触发 ， 如 果 为 false， 则 事件 监听 函数 将 在 冒 泡 阶段 触发 。 

| 【示例 1 在 下 面 示例 中 ， 使 用 addEventListener() 方 法 为 所 有 按钮 注册 click 事件 。 首 先 ， 调 用 

| document 的 getElementsByTagName() 方 法 捕获 所 有 按钮 对 象 ; 然后 , 使 用 forin 语句 遍历 按钮 集 (btn)， 

| 并 使 用 addEventListener() 方 法 分 别 为 每 一 个 按钮 注册 一 个 事件 函数 , 该 函数 获取 当前 对 象 所 显示 的 

| 文本 。 

| <butonid-vbmlv onclick="btm10:'> 按 钮 1<jbutton> 

<button id="btn2" onclick="btn2(event):"> 按 钮 2</button> 


| <script> 

| varbln = document.getElementsByTagName("button"): // 捕获 所 有 按钮 

| for (variin btn) { / 遍历 按钮 集合 

| btn[i].addEventListener("click". functionO { 

| alert(this.innerHTMID: 

| }, tme); // 为 每 个 按钮 对 象 注册 一 个 事件 监听 函数 ， 定 义 在 捕获 阶段 进行 响应 

| 吕 

| </script> 

| 

| 在 浏览 器 中 预览 ， 单 击 不 同 的 按钮 ， 则 浏览 器 会 自动 弹出 对 话 框 ， 显 示 按 钮 的 名 称 ， 如 图 13.2 
所 示 。 
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图 13.2 ”响应 注册 事件 


忘 提示 : 早期 下 浏览 器 不 支持 addEventListener(0) 方 法 。 从 IE 8 开始 才 完 全 支持 DOM 事件 模型 。 


使 用 addEventListener( 方 法 能 够 为 多 个 对 象 注册 相同 的 事件 监听 函数 , 也 可 以 为 同一 个 对 象 注 册 
多 个 事件 监听 函数 。 为 同一 个 对 象 注册 多 个 事件 监听 函数 对 于 模块 化 开发 非常 有 用 。 

【示例 2】 在 下 面 示例 中 ， 为 段落 文本 注册 两 个 事件 : mouseover 和 mouseout。 当 鼠标 移 到 段落 
文本 上 面 时 会 显示 为 蓝 色 背景 , 而 当 鼠 标 移出 段落 文本 时 会 自动 显示 为 红色 背景 。 这 样 就 不 需要 破坏 
文档 结构 为 段落 文本 增加 多 个 事件 属性 。 

<p id="p1"> 为 对 象 注册 多 个 事件 <p> 
<script> 
varpl = document.getElementById("p1");// 捕获 段落 元 素 的 句柄 
pl.addEventListener("mouseover", fonctionO { 

this.style.background = "blue': 
】 ,true); / 为 段落 元 素 注册 第 一 个 事件 监听 函数 
pl.addEventListener("mouseout", fnnctionO { 

this style background = Ted'; 
}, true); // 为 段落 元 素 注册 第 二 个 事件 监听 函数 
/scrip> 
正 事件 模型 使 用 attachEvent0 方 法 注册 事件 ， 用 法 如 下 。 
element.attachEvent(etype.eventName) 


参数 说 明 如 下 。 

etype: 设置 事件 类 型 ， 如 onclick、onkeyup、onmousemove 等 。 

eventName: 设置 事件 名 称 ， 也 就 是 事件 监听 函数 。 | 

【示例 3】 在 下 面 示 例 中 ， 为 段落 标签 <p> 注 册 两 个 事件 ，mouseover 和 mouseout， 设 计 当 鼠 标 | 
经 过 时 ， 段 落 文本 背景 色 显示 为 蓝 色 ， 当 鼠标 移 开 之 后 ， 背 景色 显示 为 红色 。 | 

<p id="p1">IE 事件 注册 </p> 


<scrip> 
var pl = document.getElementById("p1"); // 捕获 段落 元 素 
pl.attachEvent("onmouseover". functionO { 

Ppl.style.backeround = blue’; 
ba // 注册 mouseover 事件 
pl.attachEvent("onmouseout". functionO { 

pl.style.background = Tred': 
D5 / 注册 mouseout 事件 
script> 


“359。 


[sse 网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版 ) 


准 提示 : 使 用 attachEvent0 注 册 事件 时 ， 其 事件 监听 吨 数 的 调用 对 象 不 再 是 当前 事件 对 象 本 身 ， 而 
是 window 对 象 ， 因 此 事件 函数 中 的 this 就 指向 window， 而 不 是 当前 对 象 ， 如 果 要 获取 
当前 对 象 ， 应 该 使 用 event 的 srcElement 属性 。 


到 | ”4 注意 : 使 正 事件 模型 中 的 attachEvent0 方 法 第 一 个 参数 为 事件 类 型 名 称 ， 但 需要 加 上 on 前 级 ， 
而 使 用 addEventListenerO 方 法 时 ， 不 需要 这 个 on 前 级 ， 如 click。 


【拓展 】 

DOM 的 事件 操作 (监听 和 触发 )， 都 定义 在 EventTarget 接口 。Element 节点 、 
document 节点 和 window 对 象 ， 都 部 署 了 这 个 接口 。 此 外 , XMLHttpRequest、Audio 
Node、AudioContext 等 浏览 器 内 置 对 象 ， 也 部 署 了 这 个 接口 。 感 兴趣 的 读者 可 以 扫 码 
了 解 该 接口 的 用 法 。 


13.1.8 ”销毁 事件 


| 在 DOM 事件 模型 中 ， 使 用 removeEventListener() 方 法 可 以 从 指定 对 象 中 删除 已 经 注册 的 事件 监 
| 听 函 数 ， 用 法 如 下 。 

| 

| clement.removeEventListener(String type, Function listener boolean useCapture); 


参数 说 明 参 阅 addEventListener0 方 法 参数 说 明 。 
| 【示例 1】 在 下 面 示例 中 ， 分 别 为 按钮 a 和 按钮 b 注册 click 事件 ， 其 中 按钮 a 的 事件 函数 为 
| ok0, 按钮 b 的 事件 函数 为 delete_event0。 在 浏览 器 中 预览 ， 当 单 击 “ 点 我 ” 按 扭 将 弹出 一 个 对 话 框 ， 
| 在 不 删除 之 前 这 个 事件 一 直 存 在 。 当 单 击 “ 删 除 事件 ”按钮 后 ,“ 点 我 ”按钮 将 失去 了 任何 效果 ， 演 
| 示 效 果 如 图 13.3 所 示 。 


| 
| 

| aS hp//ocslhosm P - SC| localhost 
| 

| De 

| [| 


图 13.3 注销 事件 
<input id="a" type="button" value=" 点 我 " /> 
<input id="b" type="button" value=" 删 除 事件 " /> 


<scrip> 

Var a = document.getElementById("a"): // 获取 按钮 a 
| varb = document.getElementById("b"): // 获取 按钮 b 
| function okO { / 按钮 a 的 事件 监听 函数 
| alert(" 您 好 ， 欢 迎 光临 ""): 
| } 
| fnction delete eventO { // 按钮 b 的 事件 监听 函数 
| a.removeEventListener("click".ok.false): // 移出 按钮 a 的 click 事件 
| ) 
| aaddEventListener("click".ok false): // 默认 为 按钮 a 注册 事件 
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b.addEventListener("click".delete_eventfalse): // 默认 为 按钮 b 注册 事件 | 
</script> | 
| 


党 提示 : removeEventListener() 方 法 只 能 够 删除 addEventListener0 方 法 注册 的 事件 。 如 果 直 接 使 用 | 


onclick 等 写 在 元 素 上 的 事件 ， 将 无 法 使 用 removeEventListener() 方 法 删除 。 | 估 [ 
当 临 时 注册 一 个 事件 时 ， 可 以 在 处 理 完毕 后 迅速 删除 它 ， 这 样 能 够 节省 系统 资源 。 | Note 


正 事件 模型 使 用 detachEvent() 方 法 注销 事件 ， 用 法 如 下 。 
clement.detachEvent(etype.eventName) 

参数 说 明 参 阅 attachEvent0 方 法 参数 说 明 。 

由 于 正 怪异 模式 不 支持 DOM 事件 模型 ， 为 了 保证 页 面 的 兼容 性 ， 开 发 时 需要 兼容 两 种 事件 模 
以 实现 在 不 同 浏览 器 中 具有 相同 的 交互 行为 。 

【示例 2】 下 面 示例 设计 段落 标签 <p> 仅 响应 一 次 鼠标 经 过 行为 。 当 第 二 个 鼠标 经 过 段落 文本 
时 ， 所 注册 的 事件 不 再 有 效 。 


型 ， 


<p id="p1">IE 事件 注册 </p> 

<script> 

varpl = document.getElementById("p1"); 。“// 捕获 段落 元 素 | 

varfl = fonction0 { // 定义 事件 监听 函数 1 | 
pl.style.background = blue': | 

下 | 

var f2 = fnction0 { // 定义 事件 监听 函数 2 | 


pl.style.background = red'; 
Ppl.detachEvent("onmouseover", f1); // 当 触 发 mouseout 事件 后 ， 注 销 mouseover 事件 
pl.detachEvent("onmouseout", f2); // 当 触 发 mouseout 事件 后 ， 注 销 mouseout 事件 


}; 

pl.attachEvent("onmouseover", f1); // 注册 mouseover 事件 
pl.attachEvent("onmouseout", 亿 ): // 注册 mouseout 事件 
sctipt> 


【示例 3】 为 了 能 够 兼容 IE 事件 模型 和 DOM 事件 模型 ， 下 面 示例 使 用 站 语句 判断 当前 浏览 器 | 
支持 的 事件 处 理 模型 ， 然 后 分 别 使 用 DOM 注册 方法 和 下 注册 方法 为 段落 文本 注册 mouseover 和 | 
mouseout 两 个 事件 。 当 触发 mouseout 事件 后 ， 再 把 mouseover 和 mouseout 事件 注销 掉 。 


<p id="p1"> 注 册 兼 容 性 事件 </p> | 
<script> | 
varpl = document.getElementById("p1"); 。“// 捕获 段落 元 素 | 
var fl = functionO { // 定义 事件 监听 函数 1 | 
pl.style background = blue' | 
上 | 
var f2 = function| { // 定义 事件 监听 函数 2 | 
pl.style. background = red'; | 
证 pl.detachEvent) { / 兼容 正 事件 模型 | 


pl.detachEvent("onmouseover". 提 ): // 注销 事件 mouseover 
pl.detachEvent("onmouseout", 亿 ); // 注销 事件 mouseout 


b 
else { // 兼容 DOM 事件 模型 
了 Pl.IemoveEventListener("mouseover". 提 ): // 注销 事件 mouseover 


6061. 


A 网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版 ) 


| TD 
| SC 
| pl.removeEventListener("mouseout", 亿 ): // 注销 事件 mouseout 
| | 

| fl.atachEvent) { // 兼容 正 事件 模型 
仿 六 | pl.attachEvent("onmouseover", f1): // 注册 事件 mouseover 
ee pl.attachEvent("onmouseout", f2); / 注册 事件 mouseout 
} 

本 人 
| pl.addEventListener("mouseover", f1); // 注册 事件 mouseover 
| pl.addEventListener("mouseout'". f2): / 注册 事件 mouseout 
| 
| </script> 
| 【拓展 】 


JavaScript 事件 用 法 不 是 很 统一 ， 需 要 考虑 DOM 事件 模型 和 正 事件 模型 ， 为 此 需要 编写 很 多 兼 
容 性 代码 , 这 给 用 户 开发 带 来 很 多 麻烦 ,为 了 简化 开发 , 下 面 把 事件 处 理 中 经 常 使 用 的 操作 进行 封装 ， 
以 方便 调用 。 读 者 在 阅读 封装 代码 时 ， 需 要 掌握 13.1.9 节 介绍 的 event 对 象 知识 。 
| 详细 代码 请 参考 本 节 示 例 源 代码 ， 或 者 扫 码 阅读 。 


13.1.9 ”event 对 象 


event 对 象 由 事件 自动 创建 ， 代 表 事 件 的 状态 ， 如 事件 发 生 的 源 节点 ， 键 盘 按键 的 响应 状态 ， 鼠 

| 标 指 针 的 移动 位 置 ， 鼠 标 按键 的 响应 状态 等 信息 。event 对 象 的 属性 提供 了 有 关 事 件 的 细节 ， 其 方法 

| 可 以 控制 事件 的 传播 。 

| 2 级 DOM Events 规范 定义 了 一 个 标准 的 事件 模型 , 它 被 除了 正 怪异 模式 以 外 的 所 有 现代 浏览 器 

| 所 实现 ， 而 下 定义 了 专用 的 、 不 兼容 的 模型 。 简 单 比较 两 种 事件 模型 。 

在 DOM 事件 模型 中 ，event 对 象 被 传递 给 事件 监听 函数 ， 但 是 在 正 事件 模型 中 ， 它 被 存储 
在 window 对 象 的 event 属性 中 。 

在 DOM 事件 模型 中 ，event 类 型 的 各 种 子 接口 定义 了 额外 的 属性 ， 它 们 提供 了 与 特定 事件 
类 型 相关 的 细节 ; 在 正 事件 模型 中 , 只 有 一 种 类 型 的 event 对 象 , 它 用 于 所 有 类 型 的 事件 。 

下 面 列 出 了 2 级 DOM 事件 标准 定义 的 event 对 象 属性 ， 如 表 13.1 所 示 。 注 意 ， 这 些 属 性 都 是 只 


读 属性 。 
表 13.1 DOM 事件 模型 中 event 对 象 属性 

属 性 说 明 
| 返回 布尔 值 ， 指 示 事件 是 否 是 冒 泡 事件 类 型 。 如 果 事件 是 冒 泡 类 型 ， 则 返回 true; 否 
| bubbles 则 返回 false 
| 返回 布尔 值 ， 指 示 事件 是 否 可 以 取消 的 默认 动作 。 如 果 使 用 preventDefault0 方 法 可 以 
| ne 取消 与 事件 关联 的 默认 动作 ， 则 返回 值 为 true; 否则 为 false 
| RS | 到 四角 发 事件 的 当前 节点 ， 即 当前 处 理 该 事件 的 元 素 、 文 档 或 窗口 。 在 捕获 和 局 光 队 
| 段 ， 该 属性 非常 有 用 ， 因 为 在 这 两 个 阶段 ， 它 不 同 于 target 属性 
| sweatphase ”| 返回 事件 传播 的 当前 阶段 ， 包 括 捕获 阶段 (1) 、 目 标 事件 阶段 (2) 和 自 泡 阶段 (3) 
| 一 ae 返回 事件 的 目标 节点 《触发 该 事件 的 节点 ) ， 如 生成 事件 的 元 素 、 文 档 或 窗口 
| i 返回 事件 生成 的 日 期 和 时 间 
| ee 返回 当前 event 对 象 表示 的 事件 的 名 称 。 如 "submit"、"load" 或 "click" 
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下 面 列 出 了 2 级 DOM 事件 标准 定义 的 event 对 象 方法 ,如 表 13.2 所 示 , 下 事件 模型 不 支持 这 些 
方法 。 


表 13.2 DOM 事件 模型 中 event 对 象 方法 | 
方 法 说 明 | 
initEventO | 初始 化 新 创建 的 event 对 象 的 属性 | 
preventDefault0 | 通知 浏览 器 不 要 执行 与 事件 关联 的 默认 动作 


终止 事件 在 传播 过 程 的 捕获 、 目 标 处 理 或 冒 泡 阶段 进一步 传播 。 调 用 该 方法 后 ， 该 
节点 上 处 理 该 事件 的 处 理 函 数 将 被 调用 ， 但 事件 不 再 被 分 派 到 其 他 节点 


stopPropagation() 


容 提示 : 表 13.2 是 Event 类 型 提供 的 基本 属性 ， 各 个 事件 子 模块 也 都 定义 了 专用 属性 和 方法 。 例 
如 ，UIEvent 提供 了 view (发 生 事件 的 window 对 和 象 ) 和 detail ( 事件 的 详细 信息 ) 属性 。 
而 MouseEvent 除了 拥有 Event 和 UIEvent 属性 和 方法 外 ， 也 定义 了 更 多 实用 属性 ， 详 细 | 
说 明 可 参考 下 面 章节 内 容 。 
IE7 及 其 早期 版 本 ， 以 及 IE 怪异 模式 不 支持 标准 的 DOM 事件 模型 ， 并 且 正 的 event 对 象 定义 
了 一 组 完全 不 同 的 属性 ， 如 表 13.3 所 示 。 


表 13.3 IE 事件 模型 中 event 对 象 属性 


ht sie ec 
属 性 描述 | 
cancelBubble 如 果 想 在 事件 监听 函数 中 阻止 事件 传播 到 上 级 包含 对 象 ， 必 须 把 该 属性 设 为 true | 
fromElement 对 于 mouseover 和 mouseout 事件 ，fromElement 引用 移出 鼠标 的 元 素 | 
对 于 keypress 事件 ， 该 属性 声明 了 被 敲 击 的 键 生成 的 Unicode 字符 码 。 对 于 keydown “| 

keyCode 和 keyup 事件 , 它 指 定 了 被 散 击 的 键 的 虚拟 键盘 码 。 虚 拟 键盘 码 可 能 和 使 用 的 键盘 的 布 | 

局 相关 | 

| 


offsetX、offsetY _| 发 生 事件 的 地 点 在 事件 源 元 素 的 坐标 系统 中 的 x 坐标 和 y 坐标 
如 果 设 置 了 该 属性 ， 它 的 值 比 事件 监听 函数 的 返回 值 优 先 级 高 。 把 这 个 属性 设置 为 


et Ve false， 可 以 取消 发 生 事件 的 源 元 素 的 默认 动作 | 
srcElement 对 于 生成 事件 的 window 对 象 、document 对 象 或 element 对 象 的 引用 | 
toElement 对 于 mouseover 和 mouseout 事件 ， 该 属性 引用 移入 鼠标 的 元 素 | 
x y 事件 发 生 的 位 置 的 x 坐标 和 y 坐标 ， 它 们 相对 于 用 CSS 定位 的 最 内 层 包 含 元 素 | 


IE 事件 模型 并 没有 为 不 同 的 事件 定义 继承 类 型 ， 因 此 所 有 和 任何 事件 的 类 型 相关 的 属性 都 在 上 
面 列表 中 。 
窑 提示: 为 了 兼容 下 和 DOM 两 种 事件 模型 ， 可 以 使 用 下 面 表达 式 进行 兼容 。 

为 了 兼容 IE 和 DOM 两 种 事件 模型 ， 可 以 使 用 下 面 表达 式 进 行 兼容 。 

var event = event | window.event: // 兼容 不 同 模型 的 event 对 象 

上 面 代码 右 侧 是 一 个 选择 运算 表达 式 ， 如 果 事 件 监 听 函 数 存在 event 实 参 ， 则 使 用 event 形 参 来 
传递 事件 信息 ， 如 果 不 存 在 event 参数 ， 则 调用 window 对 象 的 event 属性 来 获取 事件 信息 。 把 上 面 表 | 
达 式 放 在 事件 监听 函数 中 即 可 进行 兼容 。 | 

在 以 事件 驱动 为 核心 的 设计 模型 中 ,一 次 只 能 够 处 理 一 个 事件 ， 由 于 从 来 不 会 并 发 两 个 事件 , 因 | 
此 使 用 全 局 变量 来 存储 事件 信息 是 一 种 比较 安全 的 方法 。 | 

【示例 】 下 面 示例 演示 了 如 何 禁 止 超 链 接 默 认 的 跳 转 行为 。 | 
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| & 

href="https// wwwbaidu.comy/" id="a1" > 禁止 超 链接 跳 转 <Ja><script> 

| document getElementById(al).onclick = function(e) { 

| e=ell window.event: // 兼容 事件 对 象 


| vartarget= etarget || e.srcElement: /1/ 兼容 事件 目标 元 素 
仿 | A // 仅 针对 超 链接 起 作用 
| Tetum; 


} 
| 于 (typeof e.preventDefault 一 一 'function) {  // 兼容 DOM 模型 


| e.preventDefault|: // 禁止 默认 行为 
| e.stopPropagation(: / 禁止 事件 传播 
} 
| else { / 兼容 正 模型 
| eretumValue = false: / 禁止 默认 行为 
| e.cancelBubble = true: // 禁止 冒 泡 
| } 

上 

</script> 


【拓展 】 

浏览 器 原生 提供 一 个 event 对 象 ， 所 有 的 事件 都 是 这 个 对 象 的 实例 ， 继 承 了 Event. 
prototype 对 象 。 event 对 象 本 身 就 是 一 个 构造 函数 ,可 以 用 来 生成 新 的 实例 。 有 关 该 接口 
| 的 一 些 参 考 信息 可 以 扫 码 阅读 。 
| 
| 
| 


| 13.1.10 ”事件 委托 


| 事件 委托 (Delegate)， 也 称 为 事件 托管 或 事件 代理 ,简单 描述 就 是 把 目标 节点 的 事件 绑 定 到 祖先 
| 节点 上 。 这 种 简单 而 优雅 的 事件 注册 方式 基于 : 事件 传播 过 程 中 ， 逐 层 冒 泡 总 能 被 祖先 节点 捕获 。 
| 这 样 做 的 好 处 : 优化 代码 ， 提 升 运行 性 能 ， 真 正 把 HTML 和 JavaScript 分 离 ， 也 能 防止 在 动态 添 
| 加 或 删除 节点 过 程 中 ， 注 册 的 事件 丢失 现象。 
| 【示例 1】 下 面 示例 使 用 一 般 方 法 为 列表 结构 中 每 个 列表 项 目 绑 定 click 事件 ， 单 击 列表 项 目 ， 
| 将 弹出 提示 对 话 框 ， 提 示 当 前 节点 包含 的 文本 信息 ， 如 图 13.4 所 示 。 但 是 ， 当 为 列表 框 动态 添加 列 
| 表 项 目 之 后 ， 新 添加 的 列表 项 目 没有 绑 定 click 事件 ， 这 与 我 们 的 愿望 相反 。 
| <button id="btn"> 添 加 列表 项 目 </button> 
lid"list"> 
<l 户 列表 项 目 1<li> 
| <l 记 列表 项 目 2</li> 
| <l 记 列表 项 目 3</i> 
| <ul> 
<script> 
var ul = document.getElementById("list"): 
var lis= ul.getElementsByTagName("li"): 
for (var i= 0:i < lis.length:it+) { 
lis[i].addEventListener('click’,function(e) { 

Var e =€ || window.event: 

Var target = ¢.target || e.srcElement: 

alert(e.target.innerHTMI): 
| jfalse): 
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liinnerHTML = "列表 项 目 " +it+; 
ul.appendChild(li): 
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。 列 表 项 目 5 


图 13.4 动态 添加 的 列表 项 目 事件 无 效 
【示例 2】 下 面 示例 借助 事件 委托 技巧 , 利用 事件 传播 机 制 , 在 列表 框 岂 元 素 上 绑 定 click 事件 ， 
当 事 件 传播 到 父 节点 由 上 时 ， 捕 获 click 事件 ， 然 后 在 事件 监听 函数 中 检测 当前 事件 响应 节点 类 型 ， 
如 果 是 二 元 素 ， 则 进一步 执行 下 面 代码 ， 否 则 跳出 事件 监听 函数 ， 结 束 响 应 。 
<button id="btn"> 添 加 列表 项 目 </button> 
<ul id="list"> 
<li> 列 表 项 目 1<li> 
<li> 列 表 项 目 2</i> 
<li> 列 表 项 目 3</li> 
</ul> 
<script> 
Var ul=document.getElementById("list"): 
ul.addEventListener('click' .function(e) { 
Var e=€ || window.event: 
Var target = etarget || e.srcElement: 
这 (e.target&&e.target.nodeName.toUpperCase0 一 "LI") {/* 判 断 目标 事件 是 否 为 li*/ 
alert(e.target.innerHTMIL): 


是 _ 
5 


var btn = document.getElementById("btn"): 

btn.addEventListener("click".fiunction|O { 
Var li = document.createElement("li"); 
liinnerHTML = "列表 项 目 " + it+: 
ul.appendChild(li): 


当 页 面 存 在 大 量 元 素 ， 并 且 每 个 元 素 注册 了 一 个 或 多 个 事件 时 ， 可 能 会 影响 性 能 。 访 问 和 修改 更 
多 的 DOM 节点 ， 程 序 就 会 更 慢 ， 特 别 是 事件 连接 过 程 都 发 生 在 load (或 DOMContentReady) 事件 
中 时 ， 对 任何 一 个 富 交互 网 页 来 说 ， 这 都 是 一 个 繁忙 的 时 间 段 。 另 外 ， 浏 览 器 需要 保存 每 个 事件 句柄 
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| 2 
的 记录 ， 也 会 占用 更 多 内 存 。 
je 【拓展 】 
DOM 2 事件 规范 允许 用 户 模拟 特定 事件 , IE 9、Opera、Firefox、Chrome 和 Safari 
路 谨 。 均 文 持 ，IE 还 有 自己 模拟 事件 的 方式 。 
线 上 阅读 详细 操作 步骤 和 说 明 请 扫 码 阅读 。 


13.2” 自 定义 事件 


本 节 将 以 具体 的 代码 演示 JavaSeript 自 定义 的 设计 方法 。 
13.2.1 设计 弹出 对 话 框 
Es 


视频 讲解 无 论 从 事 Web 开发 , 还 是 从 事 GUI 开发 ,事件 都 经 常用 到 。 随 着 Web 技术 的 发 展 , 使 用 JavaScript 
| 自 定义 事件 愈 发 频繁 ， 为 创建 的 对 象 绑 定 事件 机 制 ， 通 过 事件 对 外 通信 ， 可 以 极 大 提高 开发 效率 。 
| 从 本 节 开 始 ,我 们 将 针对 同一 个 项 目 ,为 了 实现 更 加 完善 的 功能 , 逐步 介绍 如 何 设计 自 定义 事件 。 
| 【示例 】 事 件 并 不 是 可 有 可 无 的 ， 在 某 些 需求 下 是 必需 的 。 下 面 示例 通过 简单 的 需求 说 明 事件 的 
| 重要 性 ， 在 Web 开发 中 对 话 框 是 很 常见 的 组 件 ， 每 个 对 话 框 都 有 一 个 关闭 按钮 ， 关 闭 按钮 对 应 关闭 
| 对 话 框 的 方法 。 示 例 初 步 设计 的 完整 代码 如 下 ， 演 示 效 果 如 图 13.5 所 示 。 
| <IDOCTYPE html> 
| <html> 
<head> 
| <title></title> 
| <style type="text/css" > 
| /4 对 话 框 外 框 样式 */ 
.dialog {width: 300px: height: 200px; margin:auto: box-shadow: 2px 2px 4px #ccc: background-color: #flflfl: 
border: solid 1px #aaa; border-radius: 4px; overflow: hidden: display: none:} 
必 对 话 框 的 标题 栏 样式 */ 
.dialog .title {font-size: 16px: font-weight: bold: color: #fff: padding: 6px: background-color: #404040:} 
必 关闭 按钮 样式 */ 
.dialog .close {width: 20px: height: 20px: margin: 3px: float: right: cursor: pointer: color: #fff:} 
</style> 
<meta charset="utf-8"> 
| </head> 
| <body> 
| <input type="button" value=" 打 开 对 话 框 " onclick="openDialog0:"/> 
<div id="dlgTest" class="dialog"><span class="close">&times:</span> 
<div class="title"> 对 话 框 标题 栏 </div> 
| <div class="content"> 对 话 框 内 容 框 </div> 
iw 
| 
| 


<script type="text/JavaScript"> 
/ 定义 对 话 框 类 型 对 象 
| function Dialog(id) { 
| this.id = id: / 存储 对 话 框 包含 框 的 ID 
| var that=this: // 存储 Dialog 的 实例 对 象 
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document.getElementById(id).children[0].onclick = functionO { 
that.close|: // 调用 Dialog 的 原型 方法 关闭 对 话 框 | 
， | 
: 定义 原型 方法 
// 定义 Dialog | 国光 
// 显示 Dialog 对 话 框 | 二 内 
ee te 
Var dleg=document.getElementById(this.id); 。 // 根据 id 获取 对 话 框 的 DOM 引用 
dlg.style.display = "block’: // 显示 对 话 框 
dlg = null: // 清空 引用 ， 避 免 生成 闭 包 


} 

/ 关闭 Dialog 对 话 框 

Dialog.prototype.close = fonction0O { 
var dlg = document.getElementById(this.id); // 根据 id 获取 对 话 框 的 DOM 引用 
dlg.style.display = mone' // 隐藏 对 话 框 
dlg=nmull: // 清空 引用 ， 避 免 生成 闭 包 


} | 
/ 定义 打开 对 话 框 的 方法 | 
function openDialog() { 1 
var dlg = new Dialog('dlgTest): // 实例 化 Dialog 
dlg.show0: / 调用 原型 方法 ， 显 示 对 话 框 
b 
</script> 
</body> 
<html> 


ET 


图 13.5 打开 对 话 框 | 
在 上 面 示例 中 ， 当 单 击 页 面 中 的 “打开 对 话 框 ”按钮 ， 就 可 以 弹出 对 话 框 ， 单 击 对 话 框 右上 角 的 | 
关闭 按钮 ， 可 以 隐藏 对 话 框 。 | 


13.2.2 ”设计 遮 罩 层 


一 般 对 话 框 在 显示 时 ， 页面 还 会 弹出 一 层 灰 蒙 蒙 半 透 明 的 遮 界 层 , 阻止 用 户 对 页 面 其 他 对 象 的 操 | 
作 ， 当 对 话 框 隐藏 时 ， 喧 音 层 会 自动 消失 ， 页 面 又 能 够 被 操作 。 本 节 以 13.2.1 节 示例 为 基础 ， 进 一 步 
执行 下 面 操作 。 

【操作 步骤 】 

(1) 复制 13.2.1 节 示 例文 件 testl.html， 在 <body> 顶 部 添加 一 个 遮 黑 层 。 


<div id="pageCover" class="pageCover"></div> 
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(2) 为 其 添加 样式 。 


-pageCover {width: 100%: height: 10096: position: absolute: z-index: 10: background-color: #666: opacity: 0.5; 
display: none:} 
| (3) 设计 打开 对 话 框 时 ， 显 示 遮 罩 层 ， 需 要 修改 openDialog0 方 法 代码 。 
Note function openDialogO { 
| // 新 增 的 代 
| / 显示 遮 罩 层 
var dlg = new Dialog('dlgTest): 
dlg.showO; 
六 
(4) 重新 设计 对 话 框 的 样式 ， 避 免 被 遮 罩 层 覆 闵 ， 同 时 清理 body 的 默认 边 距 。 
人 * 清除 页 边 距 ， 避 免 其 对 遮 量 层 的 影响 */ 


body {margin:0: padding:0:} 
| 必 设计 对 话 框 固定 定位 显示 ， 让 其 显示 在 覆盖 层 上 面 ， 并 总 是 显示 在 窗口 中 央 位 置 */ 
-dialog {width: 300px: height 200px: 
| position:fixed: 仿 固定 定位 所 
| left:50%;top:50%:margin-top:-100px; margin-left:-150px: /* 窗口 中 央 显 示 */ 
| z-index: 30; 尺 在 覆盖 层 上 面 显示 */ 
| box-shadow: 2px 2px 4px #cce: background-color: #flflfl: border: solid 1px #aaa; border-radius: 4px: overflow: 
hidden; display: none:} 


(5) 保存 文档 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 13.6 所 示 。 
¢ EIEIO FT «+ 


| 图 13.6 重新 设计 对 话 框 

”在 上 面 示例 中 ， 当 打开 对 话 框 后 ， 半 透明 的 谈 黑 层 在 对 话 框 弹出 后 ， 谈 盖 住 页 面 上 的 按钮 ， 对 话 
| 框 在 庶 罩 层 之 上 。 但 是 ， 当 关闭 对 话 框 时 ， 遮 蝇 层 仍然 存在 页 面 中 ， 没 有 代码 能 够 将 其 隐藏 。 

| 如 果 按 照 打开 时 怎么 显示 谈 四 层 ， 关 闭 时 就 怎么 隐藏 。 但 是 ， 这 个 试验 没有 成 功 ， 因 为 显示 谈 畦 
| 层 的 代码 是 在 页 面 上 按钮 事件 监听 函数 中 定义 的 ， 而 关闭 对 话 框 的 方法 存在 于 Dialog 内 部 ， 与 页 面 
| 无 关 ， 是 不 是 修改 Dialog 的 close0 方 法 就 可 以 ? 也 不 行 ， 仔 细 分 析 有 两 个 原因 : 

首先 ， 在 定义 Dialog 时 并 不 知道 遮 黑 层 的 存在 ， 这 两 个 组 件 之 间 没有 看 合 关系 ， 如 果 把 隐藏 庶 
” 畦 层 的 迎 辑 写 在 Dialog 的 close0 方 法 内 ， 那 么 Dialog 将 依赖 于 庶 罩 层 。 也 就 是 说 ， 如 果 页 面 上 没有 
让 畦 层 ，Dialog 就 会 出 错 。 

| 

| 
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其 次 ， 在 定义 Dialog 时 ， 也 不 知道 特定 页 面 遮 单 层 的 ID (<div id="pageCover">)， 没 有 办 法 知 
道 隐 藏 哪个 <div> 标 签 。 
是 不 是 在 构造 Dialog 时 ， 把 谈 界 层 的 ID 传 入 就 可 以 了 呢 ? 这 样 两 个 组 件 不 再 有 依赖 关系 ， 也 能 | 
够 通过 ID 找到 庶 畦 层 所 在 的 <div> 标 签 , 但 是 如 果 用 户 需要 部 分 页 面 弹出 遮 罩 层 ， 部 分 页 面 不 需要 谈 | 
罩 层 ， 又 将 怎么 办 ? 即便 能 够 实现 ， 但 是 这 种 写法 比较 笨拙 ， 代 码 不 够 简洁 、 灵 活 。 | 


13.2.3” 自 定义 事件 


通过 13.2.2 节 示 例 分 析 说 明 ， 如 果 简 单 针 对 某 个 具体 页 面 ， 所 有 问题 都 可 以 迎刃而解 ， 但 是 如 果 
设计 适应 能 力 强 ， 可 满足 不 同 用 户 需求 的 对 话 框 组 件 ， 使 用 自 定义 事件 是 最 好 的 方法 。 
复制 13.2.1 节 示例 testl.html， 修 改 Dialog 对 象 和 openDialog0 方 法 。 


// 重 写 对 话 框 类 型 对 象 
function Dialog(id) { 
this.id = id: 
/ 新 增 代码 
// 定义 一 个 句柄 性 质 的 本 地 属性 ， 默 认 值 为 空 
this.close_handler = pull: 
var that=this; 
document.getElementById(id).children[0].onclick = function| { 
that.closeO; 
/ 新 增 代码 
// 如 果 句 柄 的 值 为 函数 ， 则 调用 该 函数 ， 实 现 自 定 义 事件 函数 异步 触发 
if (typeof that.close_handler — ‘function’) { 
that.close handlerO: 
} 


} 


b 
// 重 写 打开 对 话 框 方法 
function openDialogO { 
document.getElementById(pageCover).style.display='block': 
var dlg = new Dialog(dlgTest); 
dlg.showO: 
/ 新 增 代码 
/ 注册 事件 ， 为 句柄 (本 地 属性 ) 传递 一 个 事件 监听 函数 
dlg.close_handler = functionO| { 
// 隐藏 遮 单 层 
/ 把 对 遗 罩 层 的 具体 操作 放 在 本 地 实例 中 实现 ， 避 免 干 扰 Dialog 类 型 
// 这 时 也 就 形成 了 自 定义 事件 的 雏形 
document.getElementById(pageCover).style.display = ‘hone': 


} 

| 

在 Dialog 对 象 内 部 添加 一 个 句柄 (属性), 当 关闭 按钮 的 click 事件 处 理 程序 在 调用 close0 方 法 后 ， | 
判断 该 句柄 是 否 为 函数 ， 如 果 是 函数 ， 就 调用 执行 该 句柄 函数 。 | 
在 openDialog0 方 法 中 ,创建 Dialog 对 象 后 为 句柄 赋值 ， 传 递 一 个 隐藏 谈 畦 层 的 方法 ， 这 样 在 关 | 

闭 Dialog 时 ， 就 隐藏 了 遮 日 层 ， 同 时 没有 造成 两 个 组 件 之 间 的 耦合 。 | 
上 面 这 个 交互 过 程 就 是 一 个 简单 的 自 定义 事件 ， 即 先 绑 定 事件 处 理 程序 , 然后 在 原生 事件 监听 函 | 

数 中 调用 ， 以 实现 触发 事件 的 过 程 。DOM 对 象 的 事件 ， 如 button 的 click 事件 ， 也 是 类 似 原 理 。 | 
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13.2.4 设计 事件 触发 模型 


Pu 设计 高 级 自 定义 事件 。 上 面 示 例 简单 演示 了 如 何 自 定义 事件 ， 远 不 及 DOM 预定 义 事件 抽象 和 复 
全 ” 杂 ， 这 种 简单 的 事件 处 理 有 很 多 深 端 。 
| 没有 共同 性 。 如 果 在 定义 一 个 组 件 时 ， 还 需要 编写 一 套 类 似 的 结构 处 理 。 
事件 绑 定 有 排斥 性 。 只 能 绑 定 一 个 close 事件 处 理 程序 ， 绑 定 新 的 会 覆盖 之 前 绑 定 。 
| 封装 不 够 完善 。 如果 用 户 不 知道 有 个 close_handler 的 句柄 ， 就 没有 办 法 绑 定 该 事件 ， 只 能 去 
查 源 代 码 。 
针对 第 一 个 次 端 ， 可 以 使 用 继承 来 解决 ， 对 于 第 二 个 滁 端 ， 则 可 以 提供 一 个 容器 (二 维 数组 ) 来 
统一 管理 所 有 事件 ， 针对 第 三 个 整 端 ， 需 要 和 第 一 个 弊端 结合 ,在 自 定义 的 事件 管理 对 象 中 添加 统一 
接口 ， 用 于 添加 、 删 除 、 触 发 事件 。 
/本 
* 使 用 观察 者 模式 实现 事件 监听 
* 自 定义 事件 类 型 
*/ 
function EventTarget() { 
/ 初始 化 本 地 事件 句柄 为 空 
this.handlers = f}; 


} 
/ 扩展 自 定义 事件 类 型 的 原型 
EventTarget.prototype = { 
constructor:EventTarget, // 修复 EventTarget 构造 器 为 自身 
/ 注册 事件 
/ 参数 type 表示 事件 类 型 
| / 参数 handler 表示 事件 监听 函数 
| addHandler: function(type,handler) { 
| / 检测 本 地 事件 句柄 中 是 否 存在 指定 类 型 事件 
if (typeof this.handlers[type] — ‘undefined’) { 
// 如 果 没 有 注册 指定 类 型 事件 ， 则 初始 化 为 空 数组 
this.handlers[type] = new ArrayO: 


} 
// 把 当前 事件 监听 函数 推 入 到 当前 事件 类 型 句柄 队列 的 尾部 
this.handlers[type].push(handlen): 
上 
| / 注销 事件 
| // 参数 type 表示 事件 类 型 
| // 参数 handler 表示 事件 监听 函数 
removeHandler: function(type.handler) { 
// 检测 本 地 事件 句柄 中 指定 类 型 事件 是 否 为 数组 
if (this.handlers[type] instanceof Array) { 
| // 获取 指定 事件 类 型 
| var handlers = this.handlers[type]: 
| // 枚 举 事件 类 型 队列 
for (vari= 0.len = handlers.length: i < len: i++) { 
// 检测 事件 类 型 中 是 否 存在 指定 事件 监听 函数 
| if (handler[i] — handler) { 
| / 如 果 存 在 指定 的 事件 监听 函数 ， 则 删除 该 处 理 函数 ， 然 后 跳出 循环 
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handlers.splice(i.1): | 
break: | 
| 
} | 
} 
// 触发 事件 
// 参数 event 表示 事件 类 型 


trigger: function(event) { 
// 检测 事件 触发 对 象 ， 如 果 不 存在 ， 则 指向 当前 调用 对 象 
if(!event.target) { 
event.target = this; 


} 

// 检测 事件 类 型 句柄 是 否 为 数组 

过 (this.handlers[event.type] instanceof Array) {// 获取 事件 类 型 句柄 
varhandlers = this.handlers[event.type]; // 枚 举 当前 事件 类 型 
for (vari=0len=handlerslength:i<len: i++) { | 
// 逐一 调用 队列 中 每 个 事件 监听 函数 ， 并 把 参数 event 传递 给 它 | 

handlers[i](event): | 
} 


addHandler() 方 法 用 于 添加 事件 处 理 程序 ，removeHandler0) 方 法 用 于 移 除 事件 处 理 程 序 ， 所 有 的 
事件 处 理 程序 在 属性 handlers 中 统一 存储 管理 。 调 用 trigger0 方 法 触发 一 个 事件 ， 该 方法 接收 一 个 至 | 
少 包含 type 属性 的 对 象 作为 参数 ， 触 发 时 会 查找 handlers 属性 中 对 应 type 的 事件 处 理 程序 。 

下 面 就 可 以 编写 如 下 代码 ， 来 测试 自 定义 事件 的 添加 和 触发 过 程 。 

/ 自 定义 事件 监听 函数 


function onClose(event) { 
alert(message: ' + event.message); 


} 
// 实例 化 自 定义 事件 类 型 
Var target = new EventTarget|: 
// 自 定义 一 个 close 事件 ， 并 绑 定 事件 监听 函数 为 onClose 
target.addHandler('close'.onClose): 
// 创建 事件 对 象 ， 传 递 事件 类 型 以 及 额外 信息 
Var event={ 
type: 'close’, 
message: 'Page Cover closed!" 


上 | 
/ 触发 close 事件 | 
target.trigger(event): | 


13.2.5 ”应 用 事件 模型 


通过 13.2.4 节 示 例 , 简单 分 解 了 高 级 自 定义 事件 的 设计 过 程 ,下面 示例 将 利用 继承 机 制 解决 第 一 个 


a 
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下 面 是 寄生 式 组 合 继承 的 核心 代码 ， 这 种 继承 方式 是 目前 公认 的 JavaScript 最 佳 继承 方式 。 


/ 原型 继承 扩展 工具 函数 
// 参数 subType 表示 子 类 
1 参数 superType 表示 父 类 


最 后 ， 显 示 本 节 完善 后 的 自 定义 事件 的 完整 代码 ， 演 示 效 果 如 图 13.7 所 示 。 
< ,cea Er + + rr pp 


(a) 打开 (b) 关闭 
图 13.7 优化 后 对 话 框 组 件 应 用 效果 


<title></title> 
<style type = "text/css" > 
人 # 清除 页 边 距 */ 
body {margin:0; padding:0:} 
必 对 话 框 外 框 样式 #/ 
.dialog {width: 300px: height: 200px: position: fixed: left: 50%: top: 50%:; margin-top: -100px: margin-left: -150px: 
人 30; box- -Shadow: 2px 2px 4px #ccc: background-color: #flflfl; border solid 1px #aaa; border-radius: 
X: Overflow: hidden: display: none:} 
| 性 对 时 的 标题 样式 #/ 
| .dialog .title {font-size: 16px; font-weight: bold: color: #fff; padding: 6px: background-color: #404040:} 
| 必 关闭 按钮 样式 */ 
.dialog .close {width: 20px: height: 20px: margin: 3px: float: right: cursor: pointer: color: #fff:} 
仿 遮 日 层 样式 */ 
| .pageCover {width: 100%: height: 100%: position: absolute: z-index: 10: background-color: #666: opacity: 0.5: 
| display: none:} 
| 
| 


/style> 
<meta charset = "utf-8"> 
<head> 
| > 
| <divid="pageCover" class="pageCover"></div> 
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<input type = "button" value = "打开 对 话 框 " onclick = "openDialog0:"/> | 
<divid = "dlgTest" class = "dialog"><span class = "close">&times:</span> | 
<div class = "tidle"> 对 话 框 标题 栏 <Jdiv> | 
<div class = "content"> 对 话 框 内 容 框 </div> | 
Jdiv> | 
<script type = "text/javascript"> | 
// 自 定义 事件 类 型 
function EventTargetO { 
this.handlers = 他: 


} 
/ 扩展 自 定义 事件 类 型 的 原型 
EventTarget.prototype = { 
constructor:EventTarget, 
/ 注册 事件 
addHandler: function(type,handler) { 
if (typeof this.handlers[type] 一 undefined) { 
this handlers[type] = new ArrayO: | 
} | 
this.handlers[type].push(handler): | 
有 
/ 注销 事件 
TemoveHandler: function(type,handler) { 
if (this.handlers[type] instanceof Array) { 
Var handlers = this.handlers[type]: 
for (var i= 0.,len = handlers.length; i < len:; i++) { 
if (handler[i] 一 handleD { 
handlers.splice(i.1): 
break: 


} 
} 
了 
// 触发 事件 
trigger: function(event) { 
if (levent.target) { 
event.target = this: 
} 
if (this.handlers[event.type] instanceof Array) { 
var handlers = this.handlers[event.type]: 
for (var i= 0., len = handlers.length: i < len: i++) { 
handlers[il(event): 


} 
a. 


} 

1/ 原型 继承 扩展 工具 函数 

function extend(subTYpe:superTYpe) { 
Var prototype = Object(superType.prototype): 
prototype.constructor = subType: 
subType.prototype = prototype: 
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// 定义 对 话 框 类 型 
| function Dialog(id) { 
| // 动态 调用 EventTarget 类 型 函数 ， 继 承 它 的 本 地 成 员 
| EventTarget.call(this) 
仿 F | thisid =id:; / 获取 对 话 框 DOM 的 id 
Ce | var that = this; // 保存 本 地 实例 


| document.getElementById(id).children[0].onclick = functionO { 
人 

| } 

| 


} 
// 继承 EventTarget 类 型 原型 属性 
extend(Dialog,EventTarget):; 
// 显示 Dialog 对 话 框 
Dialog.prototype.show = function0 { 
var dlg = document.getElementById(this.id); 
dlg.style.display = 'block’: 
dlg = null; 


} 
// 关闭 Dialog 对 话 框 
Dialog.prototype.close = fonction0 { 
var dlg = document.getElementById(this.id); 
| dlg.style.display = none'; 
| dlg=null; 
| / 在 本 地 实例 上 触发 close 事件 
| this.trigger( {type:'close'}): 


} 

// 定义 打开 对 话 框 的 方法 

function openDialogO { 
document.getElementById(pageCover).style.display = "block': 
var dlg = new Dialog(dlgTest): 
// 为 当前 实例 注册 close 事件 ， 并 传递 要 处 理 的 事件 函数 
dlg.addHandler('close'.fonctionO { 

| document.getElementById(pageCover).style.display = 'none' 

| D: 

| // 打开 对 话 框 

| dlg.showO: 

’ 

</script> 

</body> 

</html> 


| 用 户 也 可 以 把 打开 Dialog 时 ， 显 示 喧 量 层 也 写成 类 似 关 闭 事件 的 方式 〈test5.html)。 当 代码 中 存 
| 在 多 个 部 分 ， 在 特定 时 刻 相互 交互 的 情况 下 ， 自 定义 事件 就 非常 有 用 。 
如 果 每 个 对 象 都 有 其 他 对 象 的 引用 ， 那 么 整个 代码 高 度 耦 合 ， 对 象 改动 会 影响 其 他 对 象 ， 维 护 起 
| 来 就 困难 重重 ， 自 定义 事件 使 对 象 能 够 解 耦 ， 功 能 隔绝 ， 这 样 对 象 之 间 就 可 以 实现 高 度 聚 合 。 
| 回 光 S 攻 加 【拓展 】 

这 13.2 节 ， 通 过 一 个 完整 的 示例 演示 了 自 定义 事件 的 实现 过 程 ， 下 面 总 结 自 定义 事 
件 和 事件 模拟 的 基本 模式 和 方法 ， 感 兴趣 的 读者 可 以 扫 码 阅读 。 
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13.3 息 标 事件 


鼠标 事件 指 与 鼠标 相关 的 事件 ， 具 体 说 明 如 下 。 
< 注意 : 限于 篇 幅 ， 从 本 节 开始 到 本 章 末 尾 ， 有 关 JavaScript 事件 类 型 的 详细 讲解 ， 全 部 放 在 线 上 | 
呈现 ， 作 为 选 学 内 容 ， 读 者 可 以 根据 需要 有 选择 地 扫 码 阅读 。 | 

13.3.1 click 和 dblclick 


当 用 户 在 element 节点 、document 节点 、window 对 象 上 单 击 鼠标 (或 者 按 下 Enter 键 ) 时 ，click 
事件 触发 ， 双击 鼠 标 时 ， 触 发 dblclick 事件 。 详 细 说 明 请 扫 码 阅读 。 


13.3.2 mouseup、mousedown 和 mousemove 

mouseup、mousedown 和 mousemove 事件 跟踪 鼠标 单 击 的 详细 状态 。 详 细 说 明 请 扫 码 阅读 。 
13.3.3 mouseover 和 mouseenter 

mouseover 事件 和 mouseenter 事件 , 都 是 鼠标 进入 一 个 节点 时 触发 .详细 比较 和 说 明 请 扫 码 阅读 。 
13.3.4 mouseout 和 mouseleave 


mouseout 事件 和 mouseleave 事件 ， 都 是 鼠标 离开 一 个 节点 时 触发 。 二 者 区 别 : mouseout 事件 会 
冒 泡 ，mouseleave 事件 不 会 。 详 细 说 明 请 扫 码 阅读 。 


13.3.5 contextmenu 


contextmenu 事件 在 一 个 节点 上 单 击 鼠 标 右键 时 触发 ， 或 者 按 下 “上 下 文 菜单 ” 键 时 触发 。 
13.4 MouseEvent 对 象 


鼠标 事件 使 用 MouseEvent 对 象 表示 ， 它 继承 UIEvent 对 象 和 Event 对 象 。 浏 览 器 提供 一 个 | 
MouseEvent 构造 函数 ， 用 于 新 建 一 个 MouseEvent 实例 。 详 细 说 明 请 扫 码 阅读 。 | 


13.4.1 altKey、ctrIKey、metaKey 和 shiftKey 


altKey、ctrIKey、metaKey 和 shiftKey 属性 记录 鼠标 事件 发 生 时 ， 是 否 按 下 某 个 键 。 详 细 说 明 请 
扫 码 阅读 。 
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13.4.2 button 和 buttons 
button 和 buttons 属性 记录 鼠标 键 的 操作 情况 。 详 细 说 明 请 扫 码 阅读 。 


13.4.3 clientX clientY .movementX .movementY ,screenX 和 screenY 
5 回 


clientX、clientY、movementX、movementY、screenX 和 screenY 这 6 个 属性 实时 
记录 鼠标 的 坐标 和 偏 移 信 息 。 详 细 说 明 请 扫 码 阅读 。 


lt 
线 上 阅读 


13.4.4 relatedTarget 


TelatedTarget 属性 返回 事件 的 次 要 相关 节点 。 对 于 那些 没有 次 要 相关 节点 的 事件 ,该 属性 返回 null。 
| 详细 说 明 请 扫 码 阅读 。 


辐 | 13.4.5 小 结 


由 于 浏览 器 的 不 兼容 性 ， 不 同 浏览 器 分 别 在 各 自 事件 对 象 中 定义 了 不 同 的 属性 。 具体 兼容 方法 和 
| 演示 示例 请 扫 码 阅读 。 


| 13.5 wheel 事件 


| wheel 事件 是 与 鼠标 滚轮 相关 的 事件 ， 目 前 只 有 一 个 wheel 事件 。 用 户 滚动 鼠标 的 滚轮 ， 就 触发 
线 上 阅读 | 这 个 事件 。 详 细 说 明 请 扫 码 阅读 。 


13.6 键盘 事件 


键盘 事件 用 来 描述 键盘 行为 ， 主 要 有 keydown、keypress、keyup3 个 事件 。 详 细 说 明 请 扫 码 
阅读 。 


| 13.6.1 altKey、 ctrKey、 metaKey 和 shiftKey 

| 这 些 属性 将 返回 一 个 布尔 值 ， 表 示 是 否 按 下 对 应 的 键 。 详 细 说 明 请 扫 码 阅读 。 

13.6.2 key 和 charCode 

key 属性 返回 一 个 字符 串 ， 表 示 按 下 的 键 名 。 详 细 说 明 请 扫 码 阅读 。 

13.6.3 小 结 

键盘 事件 定义 了 很 多 属性 ， 利 用 这 些 属 性 可 以 精确 控制 键盘 操作 。 详 细 说 明 请 扫 码 阅读 。 


“0° 


13.7 进度 事件 


进度 事件 用 来 描述 一 个 事件 进展 的 过 程 ， 例 如 XMLHttpRequest 对 象 发 出 的 HTTP 请 求 的 过 程 ，| 
<img>、<audio>、<video>、<style>、<link> 加 载 外 部 资源 的 过 程 。 下 载 和 上 传 都 会 发 生 进 度 事件 。 详 
细 说 明 请 扫 码 阅读 。 | 


13.8 拖 鬼 事件 
拖 电 指 的 是 ， 用 户 在 某 个 对 象 上 按 下 鼠标 键 不 放 ， 拖 电 它 到 另 一 个 位 置 ， 然 后 释放 鼠标 键 ， 将 该 | 
对 象 放 在 那里 。 详 细 说 明 请 扫 码 阅读 。 | 


13.8.1 事件 种 类 


当 Element 节点 或 选中 的 文本 被 拖 忠 时 ， 就 会 持续 触发 拖 忠 事件 ， 包 括 以 下 一 些 事件 。 详 细 说 明 | 
请 扫 码 阅读 。 | 


13.8.2 ”DataTransfer 对 象 概述 


所 有 的 拖 忠 事件 都 有 一 个 dataTransfer 属性 ， 用 来 保存 需要 传递 的 数据 。 这 个 属性 的 值 是 一 个 | 
DataTransfer 对 象 。 详 细 说 明 请 扫 码 阅读 。 


13.8.3 ”DataTransfer 对 象 的 属性 


DataTransfer 对 象 包含 4 个 属性 : dropEffect、effectAllowed 、 files 和 types。 详细 说 明 请 扫 码 阅读 。 


imr 
13.8.4 ”DataTransfer 对 象 的 方法 

DataTransfer 对 象 包 含 4 个 方法 : setData0、getData0 、clearData0 和 setDragImage()。 详 细 说 明 请 
扫 码 阅读 。 


13.9 触摸 事件 


触摸 API 由 3 个 对 象 组 成 : Touch、TouchList 和 TouchEvent， 提 示 说 明 请 扫 码 阅读 。 
13.9.1 Touch 对 象 


Touch 对 象 代表 一 个 触摸 点 。 触 摸 点 可 能 是 一 根 手指 ， 也 可 能 是 一 根 触摸 笔 。 它 有 以 下 属性 ， 具 
体 说 明 请 扫 码 阅读 。 | 
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13.9.2 ”TouchList 对 象 


| TouchList 对 象 是 一 个 类 似 数组 的 对 象 ， 成 员 是 与 某 个 触摸 事件 相关 的 所 有 触摸 点 。 具 体 说 明 请 
| 扫 码 阅读 。 


13.9.3 TouchEvent 对 象 
回 


TouchEvent 对 象 继承 Event 对 象 和 UIEvent 对 象 ， 表 示 触 摸 引发 的 事件 。 除 了 被 
继承 的 属性 以 外 ， 它 还 有 一 些 自己 的 属性 。 具 体 说 明 请 扫 码 阅读 。 


线 上 阅读 


13.9.4 ”触摸 事件 的 种 类 


| 触摸 引发 的 事件 ， 有 以 下 几 类 。 可 以 通过 TouchEvent.type 属性 , 查看 到 底 发 生 的 是 哪 一 种 事件 。 
| 具体 说 明 请 扫 码 阅读 。 


13.10 表单 事件 


| 13.10.1 input 

当 <input>、<textarea> 的 值 发 生变 化 时 触发 input 事件。 具体 说 明 请 扫 码 阅读 。 
13.10.2 select 

| 当 在 <input>、<textarea> 中 选中 文本 时 触发 select 事件 。 具 体 说 明 请 扫 码 阅读 。 

| 13.10.3 change 


当 <input>、<select>、<textarea> 的 值 发 生变 化 时 触发 change 事件 。 它 与 input 事件 的 最 大 不 同 ， 
| 就 是 不 会 连续 触发 ， 只 有 当 全 部 修改 完成 时 才 会 触发 。 具 体 说 明 请 扫 码 阅读 。 


| 13.10.4 submit 

| 当 表 单数 据 向 服务 器 提交 时 触发 submit 事件 。 具 体 说 明 请 扫 码 阅读 。 

13.10.5 reset 

为 <input> 或 <button> 标 签 设置 type = "reset" 属 性 可 以 定义 重 置 按钮 。 具 体 说 明 请 扫 码 阅读 。 


13.11 文档 事件 


13.11.1 beforeunload、unload、load、error、pageshow 和 pagehide 


| beforeunload、unload、load、error、pageshow 和 pagehide 事件 与 网 页 的 加 载 与 卸载 相关 。 详 细 说 
读 | 明 请 扫 码 阅读 。 


ais 
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13.11.2 DOMContentLoaded 和 readystatechange 
DOMContentLoaded 和 readystatechange 事件 与 文档 状态 相关 。 详 细 说 明 请 扫 码 阅读 。 | 各 上 加 
13.11.3 SCroll 


scroll 事件 在 文档 或 文档 元 素 滚动 时 触发 ， 主 要 出 现在 用 户 拖 动 滚动 条 。 详 细 说 
明 请 扫 码 阅读 。 


13.11.4 resize 


resize 事件 在 改变 浏览 器 窗口 大 小 时 触发 ， 发 生 在 window、body、frameset 对 象 上 面 。 详 细 说 明 
请 扫 码 阅读 。 


13.11.5 hashchange 和 popstate 
hashchange 和 popstate 事件 与 文档 的 URL 变化 相关 。 详 细 说 明 请 扫 码 阅读 。 


二 


13.11.6 cut、copy 和 paste 
HTML5 规范 了 剪贴 板 数据 操作 ， 主 要 包括 6 个 剪贴 板 事件 。 详 细 说 明 请 扫 码 阅读 。 


13.11.7 focus、blur、focusin 和 focusout 


事件 发 生 在 Element 节点 和 document 对 象 上 面 , 与 获得 或 失去 4 
blur、focusin 和 focusout 4 个 事件 。 详 细 说 明 请 扫 码 阅读 。 


点 相关 。 它 主要 包括 focus、 
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CSS 与 JavaScript 是 两 个 有 着 明确 分 工 的 领域 ， 前 者 负责 页 面 的 视觉 效果 ， 后 者 负责 与 
用 户 的 行为 互动 。 但 是 ,它们 毕竟 同属 网 页 开发 的 前 端 , 因此 不 可 避免 有 着 交叉 和 互相 配合 
本 章 将 介绍 如 何 使 用 JavaScript 脚本 驱动 CSS 样式 ， 完 成 各 种 交互 式 行为 的 设计 。 


【 学 习 要 点 】 
WI 使 用 JavaScript 操作 行内 样式 
MW 使 用 JavaScript 操作 样式 表 


MI 设计 简单 的 页 面 交 互 行为 或 将 效 
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14.1 CSS 脚本 基础 


| 鳃 
操作 CSS 样式 最 简单 的 方法 ， 就 是 使 用 网 页 元 素 节点 的 getAttribute0 方 法 、setAttribute0 方 法 和 | 
removeAttibute0 方 法 ， 直 接 读 写 或 出 除 网 页 元 素 的 style 属性 。 例 如 ， ete 
divsetAttribute( | 
‘background-color: red:'+ ‘border: 1px solid black:" | 
| 
上 面 的 代码 相当 于 下 面 的 HTML 代码 。 | 


<div style="background-color red: border: 1px solid black:" /> 


DOM 2 级 规范 为 CSS 样式 的 脚本 化 定义 了 一 套 API， 详 细 说 明 可 以 扫 码 了 解 。 
本 节 将 简单 介绍 如 何 正确 访问 脚本 样式 ， 不 涉及 各 个 模块 的 系统 介绍 。 


14.1.1 访问 行内 样式 


CSS 样式 包括 3 种 形式 : 外 部 样式 、 内 部 样式 和 行内 样式 。 在 早期 DOM 中 ， 任 何 支持 style 属 | 视频 讲解 
性 的 HTML 标签 ， 在 JavaScript 中 都 有 一 个 映射 的 style 属性 。 | 

HTMLElement 的 style 属性 是 一 个 可 读 可 写 的 CSS2Properties 对 象 。CSS2Properties 对 象 表示 一 | 
组 CSS 样式 属性 及 其 值 ， 它 为 每 一 个 CSS 属性 都 定义 了 一 个 JavaScript 脚本 属性 。 | 

这 个 style 对 象 包含 了 通过 HTML 的 style 属性 设置 的 所 有 CSS 样式 信息 ， 但 不 包含 与 样式 表 中 | 
的 样式 。 因 此 ， 使 用 元 素 的 style 属性 只 能 访问 行内 样式 ， 不 能 访问 样式 表 中 的 样式 信息 。 | 

style 对 象 可 以 通过 cssText 属性 返回 行内 样式 的 字符 串 表示 。 字 符 串 中 去 掉 了 包围 属性 和 值 的 花 
括号 ， 以 及 元 素 选择 器 名 称 。 

除了 cssText 属性 外 , style 对 象 还 包含 每 一 个 与 CSS 属性 一 一 映射 的 脚本 属性 (需要 浏览 器 支持 )。 
这 些 脚 本 属性 的 名 称 与 CSS 属性 的 名 称 紧 密 对 应 , 但 是 为 了 避免 JavaScript 语法 错误 而 进行 了 一 些 改 
变 。 含 有 连 字符 的 多 词 属性 〈 如 font-family) 在 JavaScript 中 会 删除 这 些 连 字符 ， 以 驼峰 命名 法 重新 | 
命名 CSS 的 脚本 属性 名 称 〈 如 fontFamily )。 | 

【示例 】 对 于 border-right-color 属性 来 说 ,在 脚本 中 应 该 使 用 borderRightColor。 所 以 下 面 页 面 脚 | 

本 中 的 用 法 都 是 错误 的 。 

<div id="box" > 盒子 </div> 

<script> 

var box = document.getElementById("box"): 

box.style.border-right-color = "red": 

box.style.border-right-style = "solid": 

</scrip> 

针对 上 面 页 面 脚本 ， 可 以 修改 如 下 。 

<script> 

Var box = document.getElementById("box"): 

box.style.borderRightColor = "red": 
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box.style.borderRightStyle = "solid": 
| </script> 
| 
| 


| 罕 提示 : 使 用 CSS 脚本 属性 时 ， 应 该 注意 几 个 问题 


全 ”| 回 由 于 toat 是 JavaSeript 保留 字 ,禁止 使 用 , 因此 使 用 cssFloat 表示 float 属性 的 脚本 名 称 . 
回 在 JavaScript 中 , 所 有 CSS 属性 值 都 是 字符 串 ， 必 须 加 上 引号 ,以 表示 字符 串 数据 类 型 。 


| elementNode.style.fontFamily = "Arial, Helvetica, sans-serif 

| elementNode.style.cssFloat = "left": 
elementNode.style.color = "#ff0000"; 

| 回 CSS 样式 声明 结尾 的 分 号 不 能 够 作为 属性 值 的 一 部 分 被 引用 ，JavaScript 脚本 中 的 分 号 只 是 

| JavaScript 语法 规则 的 一 部 分 ， 不 是 CSS 声明 中 分 号 的 引用 。 

| 声明 中 属性 值 和 单位 都 必须 作为 值 的 一 部 分 ， 完 整地 传递 给 CSS 脚本 属性 ， 省 略 单位 则 所 
设置 的 脚本 样式 无 效 。 

elementNode.style.width = "100px"; 

在 脚本 中 可 以 动态 设置 属性 值 ， 但 最 终 赋值 给 属性 的 值 应 是 一 个 字符 串 。 

elementNode.style.top = top + "px": 

elementNode.style.right = right + "px":; 

| elementNode.style.bottom = bottom + "px"; 

| elementNode.style.left = left + "px": 

| 如 果 没有 为 HTML 标签 设置 style 属性 ,那么 style 对 象 中 可 能 会 包含 一 些 属性 的 默认 值 , 但 
这 些 值 并 不 能 准确 地 反映 该 元 素 的 样式 信息 。 


14.1.2 ”使 用 style 


DOM 2 级 样式 规范 为 style 对 象 定 义 了 一 些 属性 和 方法 ， 简 单 说 明 如 下 。 
cssText: 访问 HTML 标签 中 style 属性 的 CSS 代码 。 

length: 元 素 定义 的 CSS 属性 的 数量 。 

parentRule: 表示 CSS 的 CSSRule 对 象 。 

getPropertyCSSValue0: 返回 包含 给 定 属性 值 的 CSSValue 对 象 。 
getPropertyPriority(): 返回 指定 CSS 属性 中 是 否 附加 了 !important 命令 。 
item(): 返回 给 定位 置 的 CSS 属性 的 名 称 。 

getPropertyValue(): 返回 给 定 属性 的 字符 串 值 。 

TemoveProperty0: 从 样式 中 删除 给 定 属性 。 

setProperty0: 将 给 定 属性 设置 为 相应 的 值 ， 并 加 上 优先 权 标志 。 
下 面 重点 介绍 style 对 象 方法 的 使 用 。 


1. getPropertyValue() 方 法 
getPropertyValueO 能 够 获取 指定 元 素 样式 属性 的 值 ， 用 法 如 下 。 
| var value = .style.getPropertyValue(propertyName) 
| 参数 propertyName 表示 CSS 属性 名 , 不 是 CSS 脚本 属性 名 , 对 于 复合 名 应 该 使 用 连 字 符 进 行 连接 。 


办 办 办 国 办 办 多 加 


“382° 


第 1]4 章 CSS 拓 作 一 ES 


【示例 1】 下 面 代码 使 用 getPropertyValue0 方 法 获取 行内 样式 中 width 属性 值 ， 然 后 输出 到 盒子 | 
内 显示 ， 如 图 14.1 所 示 。 | 


<scrip> 
window.onload = function0 { 


Var box = document.getElementById("box"):; / 获取 <div id="box"> | 
Var width = box.style.getPropertyValue("width"); 。 “// 读 取 div 元 素 的 width 属性 值 | Note 
box.innerHTML = "盒子 宽度 : "+ width; // 输出 显示 width 值 

外 

</script> 


<div id="box" style="width: 300px: height 200px:border: solid 1px red" > 盒子 </div> 


图 14.1 使 用 getPropertyValue0 读 取 行内 样式 
早期 正版 本 不 支持 getPropertyValue0 方 法 ,但 是 可 以 通过 style 对 象 直接 访问 样式 属性 以 获取 指 
定 样式 的 属性 值 。 
【示例 2】 针 对 上 面 示例 代码 ， 可 以 使 用 如 下 方式 读 取 width 属性 值 。 
window.onload = functionO { 
Var box = document.getElementById("box"): 


Var width = box.style.width; 
box.innerHTML = "盒子 宽度 : "+ width: 


2. setProperty() 方 法 

setProperty( 方 法 为 指定 元 素 设置 样式 ， 有 具体 用 法 如 下 。 

e.style.setProperty(propertyName, value. priority) 

参数 说 明 如 下 。 

propertyName: 设置 CSS 属性 名 。 

value: 设置 CSS 属性 值 ， 包 含 属性 值 的 单位 。 

priority: 表示 是 否 设置 !important 优先 级 命令 ， 如 果 不 设置 可 以 以 空 字符 串 表 示 。 

【示例 3】 在 下 面 示例 中 使 用 setProperty() 方 法 定义 盒子 的 显示 宽度 和 高 度 分 别 为 400 像素 和 
200 像素 。 


<script> 
window.onload = fnnction0 { 


Var box = document.getElementById("box"); // 获取 <div id="box"> 
box.style.setProperty("width"."400px".""): // 定义 盒子 宽度 为 400 像素 
box.style.setProperty("height"."200px".""): / 定义 盒子 宽度 为 200 像素 
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</script> 
<div id="box" style="border: solid 1px red" > 盒子 </div> 


如 果 兼 容 早期 下 浏览 器 ， 可 以 使 用 如 下 方式 设置 。 
window.onload = fonction0 { 
Var box = document.getElementById("box"): 
box.style.width = "400px": 
box.style.height = "200px"; 
} 
3. removeProperty() 方 法 
TemoveProperty( 方 法 可 以 移出 指定 CSS 属性 的 样式 声明 ， 具 体 用 法 如 下 。 


e.style. removeProperty (propertyName) 

4.item() 方 法 

item( 方 法 返回 style 对 象 中 指定 索引 位 置 的 CSS 属性 名 称 ， 有 具体 用 法 如 下 。 

Varname = €.style.item(index) 

参数 index 表示 CSS 样式 的 索引 号 。 

5. getPropertyPriority() 方 法 

getPropertyPriority() 方 法 可 以 获取 指定 CSS 属性 中 是 否 附加 了 !important 优先 级 命令 ,如 果 存 在 则 


[Es 
回 


“important” 字 符 串 ， 否 则 返回 空 字符 串 。 


【示例 4 在 下 面 示例 中 , 定义 鼠标 移 过 盒子 时 , 设置 盒子 的 背景 色 为 蓝 色 , 而 边框 颜色 为 红色 ， 


当 移出 盒子 时 ， 又 恢复 到 盒子 默认 设置 的 样式 ;而 单 击 盒子 时 则 在 盒子 内 输出 动态 信息 ， 显 示 当 前 盒 
子 的 宽度 和 高 度 ， 演 示 效 果 如 图 14.2 所 示 。 


<script> 
window.onload = functionO { 
var box = document.getElementById("box"):; ”// 获取 盒子 的 引用 
box.onmouseover = fnnctionO { / 定义 鼠标 经 过 时 的 事件 处 理 函 数 
box.style.setProperty("background-color", "blue". "0): // 设置 背景 色 为 蓝 色 
box.style.setProperty("border", "solid SO0px red". ""): 
// 设置 边框 为 50 像素 的 红色 实 线 


} 
box.onclick = function| { // 定义 鼠标 单 击 时 的 事件 处 理 函数 
box .innerHTML = (box.style.item(0) + ": " + box.style.getPropertyValue("width")): 
/ 显示 盒子 的 宽度 


box .innerHTML = box .innerHTML + "<br>"+ (box.style.item(1)+":" 
二 box.style.getPropertyValue ("height")): ”// 显示 盒子 的 高 度 
} 
box.onmouseout = fonction0 { // 定义 鼠标 移出 时 的 事件 处 理 函数 
box.style.setProperty("background-color", "red", ""): // 设置 背景 色 为 红色 
box.style.setProperty("border". "solid 50px blue".""): // 设置 50 像素 的 蓝 色 实 边框 
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</script> 
<div id="box" style = "width: 100px: height: 100px: backeround-color: red: border solid 50px blue:"></div> 


(a) 默认 显示 效果 (b) 鼠标 经 过 效果 (c) 鼠标 单 击 效果 
14.2 ”设计 动态 交互 样式 效果 | 
【示例 5】 针 对 示例 4， 下 面 示例 使 用 快捷 方法 设计 相同 的 交互 效果 ， 这 样 能 够 兼容 IE 早期 版 | 
本 ， 页 面 代码 如 下 所 示 。 | 
| 
<script> 
window.onload = functionO| { 
Var box = document.getElementById("box"); ”// 获取 盒子 的 引用 
box.onmouseover = function0O { 


box.style backgroundColor = "blue"; // 设置 背景 样式 
box.style border = "solid 50px red"; / 设置 边框 样式 


} 
box.onclick = fanctionO { / 读 取 并 输出 行内 样式 
box .innerHTML = "width: " + box.style.width: 
box .innerHTML = box .innerHTML + "<br>" + "height: " + box.style.height: 


} 
box.onmouseout = fonction0 { // 设计 鼠标 移出 后 ， 恢 复 默认 样式 
box.style .backgroundColor = "red"; 
box.style.border = "solid S0px blue"; 
} 
] 
</script> 
<div id="box" style="width:100px:; height:100px: background-color:red: border:solid 50px blue;"></div> 
【拓展 】 
非 正 浏览 器 也 支持 style 快捷 访问 方式 , 但 是 它 无 法 获取 style 对 象 中 指定 序号 
位 置 的 属性 名 称 ， 此 时 可 以 使 用 cssText 属性 读 取 全 部 style 属性 值 ， 借 助 JavaScript 
方法 再 把 返回 字符 串 劈 开 为 数组 ， 详 细 内 容 请 扫 码 阅读 。 


14.1.3 ”使 用 styleSheets 


在 DOM 2 级 样式 规范 中 ，CSSStyleSheet 表示 样式 表 ， 包 括 通过 <link> 标 签 包 含 的 外 部 样式 表 和 
在 <style> 标 签 中 定义 的 内 部 样式 表 。 虽然 这 两 个 元 素 分 别 由 HIMLLinkElement 和 HIMLStyleElement 
类 型 表示 ， 但 是 样式 表 接 口 一 致 。 

CSSStyleSheet 继承 自 StyleSheet。 StyleSheet 作为 基础 接口 还 可 以 定义 非 CSS 样式 表 。 
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CSSStyleRule 类 型 表示 样式 表 中 每 一 条 规则 ，CSSRule 对 象 是 它 的 实例 。 

使 用 document 对 象 的 styleSheets 属性 可 以 访问 样式 表 , 包 括 适应 <style> 标 签 定义 的 内 部 样式 表 ， 
以 及 使 用 <link> 标 签 或 @import 命令 导入 的 外 部 样式 表 。 

styleSheets 对 象 为 每 一 个 样式 表 定义 了 一 个 cssRules 对 象 ,用 来 包含 指定 样式 表 中 所 有 的 规则 ( 样 


| 式 )。 但 是 下 不 支持 cssRules 对 象 ， 而 支持 rules 对 象 表示 样式 表 中 的 规则 。 


兼容 主流 浏览 器 的 方法 ， 代 码 如 下 。 
Var cssRules = document .styleSheets[0].cssRules || document.styleSheets[0].mules: 


在 上 面 代 码 中 , 先 判断 浏 览 器 是 否 支持 cssRules 对 象 , 如 果 支 持 则 使 用 cssRules( 非 正 浏览 器 ); 
否则 使 用 rules (IE 浏览 器 )。 

【示例 1】 在 下 面 示例 中 ,通过 <style> 标 签 定义 一 个 内 部 样式 表 ， 为 页 面 中 的 <div id="box"> 标 签 
定义 4 个 属性 : 宽度 、 高 度 、 背 景色 和 边框 。 然 后 在 脚本 中 使 用 styleSheets 访问 这 个 内 部 样式 表 ， 把 
样式 表 中 的 第 一 个 样式 的 所 有 规则 读 取出 来 ， 在 盒子 中 输出 显示 ， 如 图 14.3 所 示 。 


| 盒子 样式 


也 柜 ，lpx solid blue 
景 : rgb(191, 251, 143) 
本 200px 


诬 ，400px 


14.3 ”使 用 styleSheets 访问 内 部 样式 表 
<style type="text/css"> 


window.onload = functionO) { 
Var box = document.getElementById("box"): 
// 判断 浏览 器 类 型 
Var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules: 
box.innerHTML = "<h3> 盒 子 样式 </h3>" 
// 读 取 cssRules 的 border 属性 
box.innerHTML += "<br> 边 框 : "+ cssRules[0].style border: 
// 读 取 cssRules 的 background-color 属性 
box.innerHTML += "<br> 背 景 : " + cssRules[0].style.backgroundColor: 
// 读 取 cssRules 的 height 属性 
box.innerHTML += "<br> 高 度 : "+ cssRules[0].style height: 
/ 读 取 cssRules 的 width 属性 
box.innerHTML += "<br> 宽 度 : "+ cssRules[0].style.width: 
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script> | 


| 
<div id="box"></div> | 
| 


次 提示 : cssRules (或 rules) 的 sbyle 对象 在 访问 CSS 属性 时 ， 使 用 的 是 CSS 脚本 属性 名 ,因此 所 | 4 
有 属性 名 称 中 不 能 使 用 连 字符 。 例 如 : | 
cssRules[0].style backgroundColor: Ezz 
这 与 行内 样式 中 的 style 对 象 的 setProperty0 方 法 不 同 ，setProperty0 方 法 使 用 的 是 CSS 属性 名 。 | 
例如 : | 
box.style.setProperty("background-color", "blue", ""); | 
| 
【示例 2】styleSheets 包含 文档 中 所 有 样式 表 ， 每 个 数组 元 素 代表 一 个 样式 表 ， 数 组 的 索引 位 置 | 
是 根据 样式 表 在 文档 中 的 位 置 决 定 的 。 每 个 <style> 标 签 包含 的 所 有 样式 表示 一 个 内 部 样式 表 , 每 个 独 | 
立 的 CSS 文件 表示 一 个 外 部 样式 表 。 下 面 示例 演示 如 何 准 确 找 到 指定 样式 表 中 的 样式 属性 。 | 
(1) 启动 Dreamweaver， 新 建 CSS 文件 ， 保 存 为 stylel.css， 存 放 在 根 目 录 下 。 | 
(2) 在 stylel.css 中 输入 下 面 样式 代码 ， 定 义 一 个 外 部 样式 表 。 | 
@charset "utf-8"; | 
body{color: black:} 
ptfcolor gray:} 
div{color: white;} 
(3) 新 建 HTML 文档 ， 保 存 为 test.html， 保 存在 根 目录 下 。 
(4) 使 用 <style> 标 签 定义 一 个 内 部 样式 表 ， 设 计 如 下 样式 。 
<style type="text/css"> 
#box {color: green:} 
Ted {color: red:} 
.blue {color: blue;} 
</style> 
(5) 使 用 <link> 标 签 导入 外 部 样式 表 文 件 stylel.css。 
<link hre 合 "stylel.css" rel="stylesheet" type="text/css" media="all" /> 
(6) 在 文档 中 插入 一 个 <div id="box"> 标 签 。 
<div id="box"></div> 
(7) 使 用 <script> 标 签 在 头 部 位 置 插 入 一 段 脚本 。 设 计 在 页 面 初始 化 完毕 后 ， 使 用 styleSheets 访 
问 文档 中 第 二 个 样式 表 ， 然 后 再 访问 该 样式 表 的 第 一 个 样式 中 color 属性 。 
<script> 
window.onload = function| { 
Var cssRules = document.styleSheets[1].cssRules || document.styleSheets[1].mles: 


Var box = document.getElementById("box"); 
boxinnerHTML = "第 二 个 样式 表 中 第 一 个 样式 的 color 属性 值 ="+ cssRules[0].style.color: 


} 
</scrip> 
(8) 保存 页 面 ， 整 个 文档 的 代码 请 参考 本 节 示 例 源 代码 。 最 后 ， 在 浏览 器 中 预览 页 面 ， 则 可 以 
看 到 访问 的 color 属性 值 为 black， 如 图 14.4 所 示 。 
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Ble) EeeEREI ET 
一 个 样式 的 color 属 性 值 = black 


Note 
vote | 1 信用 sylesheets 访问 外 部 样式 家 


容 提示 : 上 面 示 例 中 styleSheets[1] 表 示 外 部 样式 表 文件 ( stylel.css ) ， 而 cssRules[0] 就 表示 外 部 样 

式 表 文件 中 的 第 一 个 样式 .cssRules[0].style.color 可 以 获取 外 部 样式 表 文件 中 第 一 个 样式 中 

的 color 属性 的 声明 值 。 反 之 ， 如 果 把 <link> 标 签 放置 在 内 部 样式 表 的 上 面 ， 即 代码 如 下 。 

<head> 

<link hre 全 "stylel.css" rel="stylesheet" type="text/css" media="all" /> 

<style type="text/css"> 

#box {color: green:} 

Ted {color: red;} 

‘blue {color: blue:} 

</style> 

</head> 
| 上 面 脚本 将 返回 内 部 样式 表 中 第 一 个 样式 中 的 color 属性 生命 值 ， 即 为 green。 如 果 把 外 部 样式 表 
| 转换 为 内 部 样式 表 ， 或 者 把 内 部 样式 表 转 换 为 外 部 样式 表 文件 ， 不 会 影响 styleSheets 的 访问 。 因 此 ， 
| 样式 表 和 样式 的 索引 位 置 是 不 受 样式 表 类 型 以 及 样式 的 选择 符 限制 。 任 何 类 型 的 样式 表 (不 管 是 内 部 
| 的 ， 还 是 外 部 的 ) 都 在 同一 个 平台 上 按 在 文档 中 解析 位 置 进行 索引 。 同 理 ， 不 同类 型 选择 符 的 样式 在 
同一 个 样式 表 中 也 是 根据 先后 位 置 进行 索引 。 

【拓展 】 
StyleSheet 对 象 代表 网 页 的 一 张 样式 表 ， 它 包括 <link> 节 点 加 载 的 样式 表 和 <style> 

蔬 节点 内 嵌 的 样式 表 。document 对 象 的 styleSheets 属性 ， 可 以 返回 当前 页 面 的 所 有 
线 上 阅读 ”StyleSheet 对 象 ( 即 所 有 样式 表 )， 详 细 说 明 请 扫 码 阅读 。 


14.1.4 ”使 用 selectorText 


视频 讲解 | “每 个 CSS 样式 都 包含 selectorText 属性 ， 使 用 该 属性 可 以 获取 样式 的 选择 符 。 
【示例 】 在 下 面 这 个 示例 中 ， 使 用 selectorText 属性 获取 第 1 个 样式 表 〈styleSheets[0]) 中 的 第 3 个 

样式 〈cssRules[2]) 的 选择 符 ， 输 出 显示 为 “blue”， 如 图 14.5 所 示 。 

<style type="text/css"> 

#box {color: green:} 

.Ted {color: red:} 
| .blue {color: blue:} 
| </style> 
| <link href="stylel.css" rel="stylesheet" type="text/css" media="all" /> 
| 


<script> 
window.onload = function| { 
Var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].mles: 
| Var box = document.getElementById("box"): 
J box.innerHTML = "第 一 个 样式 表 中 第 三 个 样式 选择 符 ="+ cssRules[2].selectorText; 
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每 一 条 CSS 规则 的 样式 声明 部 分 (大 括号 内 部 的 部 分 )， 都 是 一 个 CSSStyle 
Declaration 对 象 ， 每 一 条 CSS 属性 ， 都 是 CSSStyleDeclaration 对 象 的 属性 。 关 于 该 对 
象 的 详细 说 明 请 扫 码 阅读 。 


14.1.5 ”修改 样式 


cssRules 的 style 对 象 不 仅 可 以 访问 属性 ， 还 可 以 设置 属性 值 。 | 视频 讲解 
【示例 】 在 下 面 示例 中 ， 样 式 表 中 包含 3 个 样式 ， 其 中 蓝 色 样式 类 〈.blue) 定义 字体 显示 为 蓝 

色 。 然后 利用 脚本 修改 该 样式 类 (.blue 规则 ) 字体 颜色 显示 为 浅 灰 色 (#999), 最 后 显示 效果 如 图 14.6 
所 示 。 

<style type="text/css"> 

#box {color: green:} 

Ted {color: red:} 

.blue {color: blue:} 

</style> 


} 

en 

<div id="box"></div> | 
a 

14.5 使 用 selectorText 访问 样式 选择 符 | 

| 

【拓展 】 | 

| 


Var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules: | 
cssRules[2].style.color = "#999": / 修改 样式 表 中 指定 属性 的 值 | 
| 
</scril | 


p> 
<p class="blue"> 原 为 蓝 色 字体 ， 现 在 显示 为 浅 灰 色 。</p> 


图 14.6 修改 样式 表 中 的 样式 


容 提示 : 不 上 述 方法 修改 样式 表 中 的 类 样式 , 会 影响 其 他 对 象 或 其 他 文档 对 当前 样式 表 的 引用 ， 因 
此 在 使 用 时 请 务必 谨慎 。 


上 述 方法 修改 样式 表 中 的 类 样式 , 会 影响 其 他 对 象 或 其 他 文档 对 当前 样式 表 的 引用 , 因此 在 使 用 
时 请 务必 谨慎 。 
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【拓展 】 
一 条 CSS 规则 包括 两 个 部 分 : CSS 选择 器 和 样式 声明 。CSS 规则 部 署 了 3 个 接 
口 : CSSRule 接口 、.CSSStyleRule 接口 和 CSSMediaRule 接口 , 详细 说 明 请 扫 码 阅读 。 


回 
全 | 线 上 阅读 
ZTE 14.1.6 添加 样式 


使 用 addRule0 方 法 可 以 为 样式 表 增 加 一 个 样式 ， 具 体 用 法 如 下 。 
styleSheet.addRule(selector,style ,[index]) 


styleSheet 表示 样式 表 引 用 ， 参 数 说 明 如 下 。 
selector: 表示 样式 选择 符 ， 以 字符 串 的 形式 传递 。 
style: 表示 具体 的 声明 ， 以 字符 串 的 形式 传递 。 
index: 表示 一 个 索引 号 ， 表 示 添 加 样式 在 样式 表 中 的 索引 位 置 ， 默 认为 -1， 表 示 位 于 样式 
表 的 末尾 ， 该 参数 可 以 不 设置 。 
Firefox 浏览 器 不 支持 addRule() 方 法 ， 但 是 支持 使 用 insertRule0 方 法 添加 样式 。insertRule0 方 法 
的 用 法 如 下 。 
styleSheet.insertRule(rule ,[index]) 
| 参数 说 明 如 下 。 
| rule: 表示 一 个 完整 的 样式 字符 串 。 
| index: 与 addRule() 方 法 中 的 index 参数 作用 相同 ， 但 默认 为 0， 放 置 在 样式 表 的 末尾 。 
| 【示例 ] 在 下 面 示例 中 ， 先 在 文档 中 定义 一 个 内 部 样式 表 ， 然 后 使 用 styleSheets 集合 获取 当前 样 
| 式 表 ， 利 用 数组 默认 属性 length 获取 样式 表 中 包含 的 样式 个 数 。 
最 后 在 脚本 中 使 用 addRuleO0 (或 insertRule0 ) 方法 增加 一 个 新 样式 ， 样 式 选择 符 为 p， 样 式 声明 
背景 色 为 红色 ， 字 体 颜 色 为 白色 ， 段 落 内 部 补 白 为 1 个 字体 大 小 。 
保存 页 面 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 14.7 所 示 。 
<style type="text/css"> 
#box {color: green:} 
Ted{color: red:} 
.blue {color: blue:} 
</style> 
<script> 
| window.onload = functionO { 
| var styleSheets = document.styleSheets[0]: 。“// 获取 样式 表 引 用 
| 


var index = styleSheets.length: / 获取 样式 表 中 包含 样式 的 个 数 
if (styleSheets.insertRule) { // 判断 浏览 器 是 否 支 持 insertRule0 方 法 
styleSheets.insertRule("p {background-color: red:color: #ftfpadding: lem:}". index): 
| } 
| else{ // 如 果 不 支持 insertRule0 方 法 
| styleSheets.addRule("P". "background-color: red:color: #fff:padding: lem:". index): 
| } 
| 国 国 
| </script> 
| <p> 在 样式 表 中 增加 样式 操作 </p> 
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图 14.7 为 段落 文本 增加 样式 


在 上 面 代码 中 , 使 用 insertRule0 方 法 在 内 部 样式 表 中 增加 一 个 p 标签 选择 符 的 样式 , 插入 位 置 在 
样式 表 的 末尾 。 设 置 段落 背景 色 为 红色 ， 字 体 颜 色 为 白色 ， 补 白 为 一 个 字体 大 小 。 

【拓展 】 

下 面 再 看 下 添加 样式 表 ， 添 加 样式 表 有 两 种 方式 : 一 种 是 添加 一 张 内 置 样式 表 ， 即 
在 文档 中 添加 一 个 <style> 节 点 ; 另 一 种 是 添加 外 部 样式 表 ， 即 在 文档 中 添加 一 个 <link> 
节点 ， 然 后 将 href 属性 指向 外 部 样式 表 的 URL， 详 细 说 明 请 扫 码 阅读 。 


14.1.7 ”访问 泻 染 样式 


行内 样式 (inline style) 具有 最 高 的 优先 级 ， 改 变 行内 样式 ， 通 常会 立即 反映 出 来 。 但 是 ， 网 页 
元 素 最 终 的 样式 是 综合 各 种 规则 计算 出 来 的 。 因 此， 如 果 想 得 到 元 素 现 有 的 样式 ， 只 读 取 行内 样式 是 
不 够 的 ， 需 要 得 到 浏览 器 最 终 计 算出 来 的 那个 样式 规则 。 

window .getComputedStyle() 方 法 ， 就 用 来 返回 这 个 规则 。 它 接受 一 个 DOM 节点 对 象 作为 参数 ， 
返回 一 个 包含 该 节点 最 终 样 式 信息 的 对 象 。 所 谓 “ 最 终 样 式 信息 ”， 指 的 是 各 种 CSS 规则 县 加 后 的 
结果 。 

DOM 定义 了 一 个 方法 帮助 用 户 快速 检测 当前 对 象 的 最 后 显示 样式 , 不 过 IE 和 标准 DOM 之 间 实 
现 的 方法 不 同 ， 分 别 说 明 如 下 。 


1.1E 浏览 器 


正 浏览 器 定义 了 一 个 currentStyle 对 象 ， 该 对 象 是 一 个 只 读 对 象 。currentStyle 对 象 包 含 文档 内 所 
有 元 素 的 style 对 象 定义 的 属性 ， 以 及 任何 未 被 覆盖 的 CSS 规则 的 style 属性 。 
【示例 1】 针 对 14.1.6 节 示例 ， 把 类 样式 blue 增加 了 一 个 背景 色 为 白色 的 声明 ， 然 后 把 该 类 样式 
应 用 到 段落 文本 中 。 


<style type="text/css"> 
#box {color: green:} 

Ted{color: red:} 

.blue {color: blue: background-color: #FFFFFF:} 
</style> 

<scrip> 
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fnnction0 { 
| document.styleSheets[0]; 。“// 获取 样式 表 引 用 
| var index = styleSheets.length: / 获取 样式 表 中 包含 样式 的 个 数 
| if (styleSheets.insertRule) { // 判断 浏览 器 是 否 支 持 insertRule0 方 法 
食 生 | styleSheets.insertRule("p {backeround-color: red:color: #fff:padding: lem:}", index); 
| } 
lse { /1/ 如 果 浏 览 器 不 支持 insertRule0 方 法 
| styleSheets.addRule("P", "background-color red:color: #fff:padding: lem:", index): 
| } 
| } 
</script> 


<p class="blue"> 在 样式 表 中 增加 样式 操作 </p> 


在 浏览 器 中 预览 ， 会 发 现 脚本 中 使 用 insertRule0 (或 addRule()) 方法 添加 的 样式 无 效 ， 效 果 如 
图 14.8 所 示 。 


在 样式 表 中 增加 样式 操作 
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图 14.8 ”背景 样式 重 有 后 的 效果 
使 用 currentStyle 对 象 获取 当前 p 元 素 最 终 显示 样式 ， 这 样 就 可 以 找到 添加 样式 失效 的 原因 。 

| 【示例 2】 把 示例 1 另存 为 test1.html， 然 后 在 脚本 中 添加 代码 ， 使 用 currentStyle 获取 当前 段落 
| 标签 <p> 的 最 终 显示 样式 ， 显 示 效 果 如 图 14.9 所 示 。 


window.onload = functionO { 
var styleSheets = document.styleSheets[0]: / 获取 样式 表 引 用 
var index = styleSheets length: / 获取 样式 表 中 包含 样式 的 个 数 


站 (styleSheets.insertRule) {// 判断 是 否 支持 insertRule0， 支 持 则 调用 ， 和 否则 调用 addRule 
styleSheets.insertRule("p {background-color: red:color: #fff:padding: lem:}". index): 

} 

clse { 

| styleSheets.addRule("P". "background-color: red:color: #fff:padding: lem:". index): 

| } 

| Varp = document.getElementsByTagName("p")[0]: 

| pinnerHTML = " 背 景 色 : "+p.currentStyle backgroundColor + "<br> 字 体 颜色 : "+ p.currentStyle.color: 


| </script> 
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图 14.9 在 正中 获取 p 的 显示 样式 


在 上 面 代 码 中 ， 先 使 用 getElementsByTagName0 方 法 获取 段落 文本 的 引用 。 然 后 调用 该 对 象 的 | 
currentStyle 子 对 象 ， 并 获取 指定 属性 的 对 应 值 。 通 过 这 种 方式 ， 会 发 现 添加 的 样式 被 blue 类 样式 覆 | 
盖 ， 这 是 因为 类 选择 符 的 优先 级 大 于 标签 选择 符 的 样式 。 | 

2. 非 IE 浏览 器 | 

DOM 定义 了 一 个 getComputedStyle0 方 法 ,该 方法 可 以 获取 目标 对 象 的 最 终 显示 样式 , 但 是 它 需 | 
要 使 用 document.defaultView 对 象 进行 访问 。 

getComputedStyle0 方 法 包含 了 两 个 参数 : 第 一 个 参数 表示 元 素 ， 用 来 获取 样式 的 对 象 ; 第 二 个 参 
数 表 示 伪 类 字符 串 ， 定 义 显示 位 置 ， 一 般 可 以 省 略 ， 或 者 设置 为 null。 

【示例 3】 针 对 上 面 示例 ， 为 了 能 够 兼容 非 正 浏览 器 ， 下 面 对 页 面 脚本 进行 修改 。 使 用 让 语句 
判断 当前 浏览 器 是 否 支持 document.defaultView， 如 果 支 持 则 进一步 判断 是 否 支持 document.default | 
View.getComputedStyle， 如 果 支 持 则 使 用 getComputedStyle( 方 法 读 取 最 终 显示 样式 ; 否则 ， 判 断 当 前 | 
浏览 器 是 否 支持 currentStyle， 如 果 支 持 则 使 用 它 读 取 最 终 显示 样式 。 | 

<style type="text/css"> | 

#box {color: green;} 

.Ted {color: red:} 

‘blue {color: blue: background-color: #FFFFFF:} ! 

</style> | 

<script> | 
window.onload = functionO { 
var styleSheets = document.styleSheets[0]: / 获取 样式 表 引 用 指针 
Var index = styleSheets.length: / 获取 样式 表 中 包含 样式 的 个 数 | 
f(styleSheets.insertRule) { // 判断 浏览 器 是 否 支 持 | 
StyleSheets.insertRule("p{background-color red:color: #fff:padding: lem:}", index): | 


else{ 
styleSheets.addRule("P". "background-color: red:color: #fff:padding: lem:", index): 


bE 
var p= document.getElementsByTagName("p")[0]: 
if (document.defaultView && document.defaultView.getComputedStyle) 
Pp.innerHTML=" 背 景 色 : "+document.defaultView.getComputedStyle(p.null).backgroundColor+"<br> | 
字体 颜色 : "+document.defaultView.getComputedStyle(p.null).color; 
else if (p.currentStyle) 
p.innerHTML = " 背 景 色 : "+p.currentStyle.backgroundColor+"<br> 字 体 颜 色 : "+p.currentStyle.color: 
else 
PinnerHTML = "当前 浏览 器 无 法 获取 最 终 显示 样式 "; 


» 
</scrip> 
<p class="blue"> 在 样式 表 中 增加 样式 操作 </p> 
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保存 页 面 ， 在 Firefox 中 预览 ， 则 显示 效果 如 图 14.10 所 示 。 


eeahent 


背景 色 : rgb(255, 255, 255) 


字体 颜色 : rqb(0, 0, 255) 


图 14.10 在 Firefox 中 获取 p 的 显示 样式 
【拓展 】 
长 DOM 节点 的 style 对 象 无 法 读 写 伪 元 素 的 样式 ， 这 时 就 要 用 到 window 对 象 的 
线 上 阅读 ”getComputedStyle0 方 法 。 详 细 说 明 请 扫 码 阅读 。 


14.1.8 ”访问 媒体 查询 


使 用 window.matchMedia 方法 可 以 检查 CSS 的 Media Query 语句 。 各 种 浏览 器 的 最 新 版 本 (包括 
IE 10+) 都 支持 该 方法 ， 对 于 不 支持 该 方法 的 老式 浏览 器 ， 可 以 使 用 第 三 方 函 数 库 matchMedia.js。 
CSS 的 Media Query 语句 有 点 像 让 语句 ， 只 要 显示 媒介 (包括 浏览 器 和 屏幕 等 ) 满足 媒体 查询 语 
句 设 定 的 条 件 ， 就 会 执行 区 块 内 部 的 语句 。 
【示例 1】 下 面 是 mediaQuery 语句 的 一 个 例子 。 
@media all and (max-width: 700px) { 


body{ 
background: #FFO0: 
} 


| 


上 面 的 CSS 代码 表示 , 该 区 块 对 所 有 媒介 (media) 有 效 , 且 视 口 的 最 大 宽度 不 得 超过 700 像素 。 
如 果 条 件 满足 ， 则 body 元 素 的 背景 设 为 扯 F0。 


”4 的 注意 : mediaQuery 接受 两 种 宽度 /高 度 的 度量 ， 一 种 是 上 例 的 “ 视 口 ”的 宽度 /高 度 ， 还 有 一 种 是 


“设备 ”的 宽度 /高 度 。 例 如 : 
body{ 
background: #FFO:; 
y 
} 

视 口 的 宽度 /高 度 (width/height) 使 用 documentElement.clientWidth/clientHeight 来 衡量 ， 单 位 是 
CSS 像素 ;设备 的 宽度 /高 度 (device-width/device-height〉 使 用 screen.width/height 来 衡量 ， 单 位 是 设 
备 硬件 的 像素 。 

window.matchMedia() 方 法 接受 一 个 mediaQuery 语句 的 字符 串 作为 参数 ,返回 一 个 MediaQueryList 
对 象 。 该 对 象 有 以 下 两 个 属性 。 

media: 返回 所 查询 的 mediaQuery 语句 字符 串 。 

matches: 返回 一 个 布尔 值 ， 表 示 当 前 环境 是 否 匹 配 查询 语句 。 

var result = windowmatchMedia((min-width: 600px)): 

iesultmedia // 返回 (min-width: 600px) 

result.matches // 返回 tme 
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【示例 2】 下 面 示例 根据 mediaQuery 是 否 匹 配 当前 环境 ， 执 行 不 同 的 JavaScript 代码 。 


var result = windowmatchMedia(C(max-width: 700px)"); 
if (result.matches) { 
console.log(' 页 面 宽度 小 于 等 于 700px"); 
} 
else{ 
console.log(' 页 面 宽度 大 于 700px”); 


} 
【示例 3】 下 面 示例 根据 mediaQuery 是 否 匹 配 当前 环境 ， 加 载 相应 的 CSS 样式 表 。 


var result = window.matchMedia("(max-width: 700px)"): 
if (result.matches) { 

Var linkElm = document.createElement(link’): 
linkElm.setAttribute('rel', 'stylesheet'); 
linkElm.setAttribute('type', ‘text/css): 
linkElm.setAttribute('href, ‘small.css’); | 
document.head.appendChild(linkElm): | 
| 


< 负 注意 : 使 如 果 window.matchMedia0 无 法 解析 mediaQuery 参数 ， 返 回 的 总 是 false， 而 不 是 报错 。 
例如 : 
WindowImatchMedia(bad string).matches // 返回 false 


window.matchMedia() 方 法 返回 的 MediaQueryList 对 象 有 两 个 方法 ， 用 来 监听 事件 ，addListenerO 
方法 和 removeListener() 方 法 。 如 果 mediaQuery 查询 结果 发 生变 化 ， 就 调用 指定 的 回调 函数 。 例 如 : 


var mql = window.matchMedia("(max-width: 700px)"): 
// 指定 回调 函数 
mql.addListener(mqCallback): 
/ 撤销 回调 函数 
mql.removeListener(mqCallback): 
function mqCallback(mq)) { 

if (mql.matches) { 

/ 宽度 小 于 等 于 700 像素 


else{ 

// 宽度 大 于 700 像素 
b 

} 


上 面 代码 中 ,回调 函数 的 参数 是 MediaQueryList 对 象 。 回 调 函数 的 调用 可 能 存在 两 种 情况 。 一 种 | 

是 显示 宽度 从 700 像素 以 上 变 为 以 下 ,， 另 一 种 是 从 700 像素 以 下 变 为 以 上 ,所 以 在 回调 函数 内 部 要 判 | 
断 一 下 当前 的 屏幕 宽度 。 | 
| 


14.1.9 CSS 事件 


1.transitionEnd 事件 
CSS 的 过 渡 效果 (transition) 结束 后 ， 触 发 transitionEnd 事件 。 例 如 : 
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| CE 
dl.addEventListener('transitionend' onTransitionEnd false): 
function onTransitionEndO { 

console.log('Transition end): 
) 
transitionEnd 的 事件 对 象 具 有 以 下 属性 。 
propertyName: 发 生 transition 效果 的 CSS 属性 名 。 
elapsedTime: transition 效果 持续 的 秒 数 ， 不 含 transition-delay 的 时 间 。 
| pseudoElement: 如 果 transition 效果 发 生 在 伪 元 素 , 会 返回 该 伪 元 素 的 名 称 ， 以 “: :” 开头。 

如 果 不 发 生 在 伪 元 素 上 ， 则 返回 一 个 空 字符 串 。 
实际 使 用 transitionend 事件 时 ， 可 能 需要 添加 浏览 器 前 级 。 
©l.addEventListener('webkitTransitionEnd', functionO { 
el.style.transition = "mone' 


D; 


2. animationstart、animationend、animationiteration 事件 
CSS 动画 有 以 下 3 个 事件 。 
animationstart 事件 :动画 开始 时 触发 。 
animationend 事件 : 动画 结束 时 触发 。 
| animationiteration 事件 : 开始 新 一 轮 动画 循环 时 人 触发。 如 果 animation-iteration-count 属性 等 
| 于 1， 该 事件 不 触发 ， 即 只 播放 一 轮 的 CSS 动画 ， 不 会 触发 animationiteration 事件 。 
| 例如 : 
div.addEventListener(‘animationiteration', function(O { 
console.log(' 完 成 一 次 动画 "); 
D: 
这 3 个 事件 的 事件 对 象 ， 都 有 animationName 属性 (返回 产生 过 渡 效 果 的 CSS 属性 名 ) 和 
| elapsedTime 属性 (动画 已 经 运行 的 秒 数 )。 对 于 animationstart 事件 ，elapsedTime 属性 等 于 0， 除 非 
animation-delay 属性 等 于 负 值 。 例 如 : 
Var el = document.getElementById("animation"): 
€l.addEventListener("animationstart", listener, false): 
el.addEventListener("animationend". listener. false): 
el.addEventListener("animationiteration", listener, false); 
function listener(e) { 
| Var li = document.createElement("li"); 
| switch (e.type) { 


case "animationstart": 
liinnerHTML = "Started: elapsed time is " + e.elapsedTime: 
break: 

| case "animationend": 

| liinnerHTML = "Ended: elapsed time is " + e.elapsedTime: 

| break: 

| case "animationiteration": 

| liinnerHTML = "New loop started at time " + e.elapsedTime: 

| break 
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document.getElementById("output").appendChild(1i): 
上 面 代码 的 运行 结果 是 下 面 的 样子 。 


Started: elapsed time is 0 | 
New loop started at time 3.01200008392334 | 


New loop started at time 6.00600004196167 

Ended: elapsed time is 9.234000205993652 Note 

animation-play-state 属性 可 以 控制 动画 的 状态 暂停 /播放 )， 该 属性 需要 加 上 浏览 器 前 级 。 

element.style.webkitAnimationPlayState = "paused": | 

element.style.webkitAnimationPlayState = "running":; | 
【拓展 】 | 

CSS 的 规格 发 展 太 快 ， 新 的 模块 层出不穷 。 如 何 知道 当前 浏览 器 是 否 支持 某 个 

模块 ， 详 细 说 明 请 扫 码 阅读 。 


14.2 CSS 尺寸 


14.1 节 主要 介绍 了 CSS 脚本 化 操作 的 基本 思路 和 方法 。 限 于 篇 幅 ， 从 本 节 开始 ， 我 们 将 以 在 线 
呈现 的 方式 介绍 如 何 使 用 CSS 设计 元 素 的 尺寸 、 位 置 、 显 示 和 动画 样式 。 本 节 重点 介绍 CSS 尺寸 的 
基本 读 写 方法 。 

14.2.1 访问 CSS 宽度 和 高 度 


在 JavaScript 中 访问 元 素 的 CSS 属性 , 可 以 通过 元 素 的 style 属性 获得 元 素 的 width 
和 height 属性 ， 就 可 以 精确 获得 它 的 大 小 。 详 细 说 明 请 扫 码 阅读 。 


14.2.2 ”把 值 转换 为 整数 


本 节 介绍 如 何 把 style 对 象 中 的 width 和 height 属性 值 转换 为 整数 值 。 详细 说 明 请 
扫 码 阅读 。 


14.2.3 ”使 用 offsetWidth 和 offsetHeight 


使 用 offsetWidth 和 offsetHeight 属性 可 以 获取 元 素 的 尺寸 ， 其 中 offsetWidth 表示 
元 素 在 页 面 中 所 占据 的 总 宽度 ，offsetHeight 表示 元 素 在 页 面 中 所 占据 的 总 高 度 。 详细 
说 明 请 扫 码 阅读 。 


14.2.4 ”元素 尺寸 


offsetWidth 和 offsetHeight 返回 值 不 是 很 标准 ， 在 复杂 的 网 页 环境 中 ， 还 需要 使 
用 clientWidth、clientHeight、offsetWidth、offsetHeight、scrollWidth、scrollHeight 来 
获取 元 素 的 尺寸 ， 详 细 说 明 请 扫 码 阅读 。 
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scrollLeft 和 scrollTop 属性 可 以 获取 移出 可 视 区 域外 面 的 宽度 和 高 度 。 详 细 说 明 请 扫 码 阅读 。 
全 14.2.6 窗口 尺寸 
| 回 


区 使 用 clientWidth 和 clientHeight 属性 可 以 获取 浏览 器 窗口 的 可 视 宽度 和 高 度 。 详 
细 说 明 请 扫 码 阅读 。 


14.3 ”CSS 位 置 


本 节 将 介绍 如 何 使 用 JavaScript 读 写 元 素 的 CSS 位 置信 息 。 
| 14.3.1 窗口 位 置 
| offsetLeft 和 offsetTop 属性 获取 元 素 相对 于 窗口 的 偏 移 位 置 。 详 细 说 明 请 扫 码 阅读 。 


相对 位 置 
offsetParent 属性 可 以 获取 在 包含 框 中 的 相对 位 置 。 详 细 说 明 请 扫 码 阅读 。 
定位 位 置 


| 访问 CSS 的 left 和 top 属性 值 ， 可 以 获取 定位 元 素 的 定位 位 置 。 详 细 说 明 请 扫 码 阅读 。 
14.3.4 ”设置 偏 移 位 置 

使 用 CSS 的 left 和 top 属性 可 以 设置 元 素 的 偏 移 位 置 。 详 细 说 明 请 扫 码 阅读 。 

| 14.3.5 “设置 相对 位 置 

本 节 将 介绍 如 何 设 置 元 素 的 相对 位 置 。 详 细 说 明 请 扫 码 阅读 。 


| 使 用 pageX/pageY 或 clientX/clientY, 以 及 scrollLeft 和 scrollTop 属性 , 可 以 获取 鼠标 指针 的 页 面 
| 位 置 。 详 细 说 明 请 扫 码 阅读 。 


鼠标 指针 相对 位 置 

offsetX/offsetY 或 layerX/layerY 属性 可 以 获取 鼠标 指针 相对 位 置 。 详 细 说 明 请 扫 码 阅读 。 
滚动 条 位 置 

scrollLeft 和 serollTop 属性 也 可 以 获取 窗口 滚动 条 的 位 置 。 详 细 说 明 请 扫 码 阅读 。 


“398。 


第 14 章 “CSS 振作 -一 0 | 


I 
14.3.9 ”设置 滚动 条 位 置 
使 用 scrollTo(x, y) 方 法 可 以 设置 滚动 条 的 位 置 。 详 细 说 明 请 扫 码 阅读 。 


14.4 CSS 显示 


本 节 将 介绍 如 何 使 用 JavaScript 控制 元 素 的 显示 、 隐 藏 ， 以 及 渐 显 、 浙 隐 。 
14.4.1 设置 显 隐 效果 

使 用 style display 属性 可 以 设计 显 隐 效 果 。 详 细 说 明 请 扫 码 阅读 。 
14.4.2 ”设置 渐 隐 、 渐 显效 果 

使 用 style opacity 属性 可 以 设计 浙 隐 、 浙 显效 果 。 详 细 说 明 请 扫 码 阅读 。 


14.5 CSS 动画 


在 JavaScript 中 设计 动画 ， 主 要 利用 循环 体 和 定时 器 (setTimeout 和 setInterval〉 来 实现 。 
14.5.1 使 用 定时 器 


window 对 象 包含 4 个 定时 器 专用 方法 ， 说 明 如 下 所 示 ， 使 用 它们 可 以 实现 代码 定时 运行 ， 避 免 | 
连续 执行 ， 这 样 可 以 设计 动画 。 | 
setImterval0: 按照 指定 的 周期 〈 以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 。 
setTimeout0: 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 。 
clearInterval(): 取消 由 setInterval0 方 法 生成 的 定时 器 对 象 。 
clearTimeout(): 取消 由 setTimeout0 方 法 生成 的 定时 器 对 象 。 
详细 说 明和 具体 用 法 请 扫 码 阅读 。 


14.5.2 滑动 

滑动 效果 主要 通过 动态 修改 元 素 的 定位 坐标 来 实现 。 详 细 说 明 请 扫 码 阅读 。 
14.5.3 渐 显 

渐 隐 渐 显效 果 主 要 通过 动态 修改 元 素 的 透明 度 来 实现 。 详 细 说 明 请 扫 码 阅读 。 


14.5.4 使 用 requestAnimationFrame 


HTML5 新 增 window.requestAnimationFrame0 方 法 ， 该 方法 用 来 在 页 面 重 绘 之 前 ， 通 知 浏览 器 调 
用 一 个 指定 的 函数 ， 以 满足 开发 者 操作 动画 的 需求 。 详 细 说 明 请 扫 码 阅读 。 
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JavaScript 通信 


浏览 器 与 服务 器 之 间 ， 和 采用 HTTP 协议 通信 。 用 户 在 浏览 器 地 址 栏 输入 一 个 网 址 ， 或 者 
通过 网 页 表单 向 服务 器 提交 内 容 ， 这 时 浏览 器 就 会 向 服务 器 发 出 HTTP 请 求 

1999 年 ,微软 公司 发 布 下 浏览 器 5.0 版 , 第 一 次 引入 新 功能 : 多 许 JavaScript 脚本 向 服 
务 器 发 起 HTTP 请 求 。 这 个 功能 当时 并 没有 引起 注意 ， 直 到 2004 年 Gmail 发 布 和 2005 年 
Google Map 发 布 ， 才 引起 广泛 重视 。2005 年 2 月 ，Ajax 这 个 词 第 一 次 正式 提出 ， 指 围绕 这 
个 功能 进行 开发 的 一 整套 做 法 。 从 此 ，Ajax 成 为 脚本 发 起 HITP 通信 的 代名词 ，W3C 也 在 
2006 年 发 布 了 它 的 国际 标准 


【 学 习 要 点 】 

了 了 解 Ajax 基础 知识 。 

正确 使 用 XMLHttpRequest 
能 够 设计 简单 的 异步 通信 代码 
能 够 路 文档 消息 传递 

使 用 WebSockets 通信 。 


总 台 吾 吾 
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15.1 XMLHttpRequest 1.0 基础 


XMLHttpRequest 是 一 个 API， 它 为 客户 端 提供 了 在 客户 端 和 服务 器 之 间 传输 数据 的 功能 。 它 提 ， 
供 了 一 个 通过 URL 来 获取 数据 的 简单 方式 ， 并 且 不 会 使 整个 页 面 刷新 。 这 使 得 网 页 只 更 新 一 部 分 页 
面 而 不 会 打扰 到 用 户 。XMLHttpRequest 在 Ajax 中 被 大 量 使 用 。 | 

所 有 现代 浏览 器 都 支持 XMLHttpRequest API， 如 下 7+、Firefox、Chrome、Safari 和 Opera。 通 | 
过 一 行 简单 的 JavaScript 代码 , 就 可 以 创建 XMLHttpRequest 对 象 。 借助 XMLHttpRequest 对 象 的 属性 | 
和 方法 ， 就 可 以 实现 异步 通信 功能 。 | 


15.1.1 定义 XMLHttpRequest 对 象 


使 用 XMLHttpRequest 对 象 实现 异步 通信 一 般 需 要 下 面 几 个 步骤 。 
(1) 定义 XMLHttpRequest 对 象 。 
(2) 调用 XMLHttpRequest 对 象 的 open() 方 法 打开 服务 器 端 URL 地 址 。 
(3) 注册 onreadystatechange 事件 处 理 函 数 ， 准 备 接收 响应 数据 ， 并 进行 处 理 。 
(4) 调用 XMLHttpRequest 对 象 的 send0 方 法 发 送 请 求 。 
现代 标准 浏览 器 都 支持 XMLHttpRequest API, 下 从 5.0 版 本 开始 就 以 ActiveX 组 件 形式 支持 
XMLHttpRequest, 在 正 7.0 版 本 中 标准 化 XMLHttpRequest, 允许 通过 window 对 象 进行 访问 。 不 过 ， 
所 有 浏览 器 的 XMLHttpRequest 对 象 都 提供 了 相同 的 属性 和 方法 。 
【示例 】 下 面 函 数 采 用 一 种 更 高 效 的 工厂 模式 把 定义 XMLHttpRequest 对 象 功 能 进行 封装 ， 这 样 
只 要 调用 createXMLHTTPObject0 方 法 就 可 以 返回 一 个 XMLHttpRequest 对 象 。 
// 定义 XMLHttpRequest 对 象 
1/ 参数 : 无 
// 返回 值 : XMLHttpRequest 对 象 实例 
function create XMLHTTPObjectO { 
var XMLHttpFactories =[ / 兼容 不 同 浏览 器 和 版 本 的 创建 函数 数组 
function0 {retumn new XMLHttpRequestO}. 
function() {return new ActiveXObject("Msxml2.XMLHTTP")}. 
function() fretum new ActiveXObject("Msxml3.XMLHTTP")}. 
function() {return new ActiveXObject("Microsoft. XMLHTTP")}. 


J: 
Var xmlhttp = false: 
for (var i= 0; i < XMLHttpFactories.length: i++) { 
// 尝试 调用 匿名 函数 ， 如 果 成 功 则 返回 XMLHttpRequest 对 象 ， 否 则 继续 调用 下 一 个 
tyt{ 
xmlhttp =XMLHttpFactories[i]O: 


} | 
catch (©) { | 
continue: // 如 果 发 生 异 常 ， 则 继续 下 一 个 函数 调用 | 

> | 
trea // 如 果 成 功 ， 则 中 止 循环 | 
| 
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Tetum xmlhttp: / 返回 对 象 实例 
上 面 函 数 首先 创建 一 个 数组 ， 数 组 元 素 为 各 种 创建 XMLHttpRequest 对 象 的 匿名 函数 。 第 一 个 元 
| 素 是 创建 一 个 本 地 对 象 ， 而 其 他 元 素 将 针对 IE 浏览 器 的 不 同 版 本 尝试 创建 ActiveX 对 象 。 然 后 设置 
”变量 xmlhttp 为 false， 表 示 不 支持 Ajax。 接 着 遍历 工厂 内 所 有 函数 并 尝试 执行 它们 ， 为 了 避免 发 生 蜡 
常 , 把 所 有 调用 函数 放 在 try 子 句 中 执行 , 如 果 发 生 错 误 , 则 在 catch 子 句 中 捕获 异常 , 并 执行 continue 
| 命令 ， 返 回 继续 执行 ， 而 不 是 抛 出 异常 。 如 果 创建 成 功 ， 则 中 止 循环 ， 返 回 创建 的 XMLHttpRequest 
| 对 象 实例 。 


15.1.2 ”建立 XMLHttpRequest 连接 
创建 XMLHttpRequest 对 象 之 后 ， 就 可 以 使 用 XMLHttpRequest 的 open() 方 法 建立 一 个 HTTP 请 
| 求 ， open0 方 法 用 法 如 下 所 示 。 
| oXMLHttpRequest.open(bstrMethod, bstrUrl varAsync, bstrUser bstrPassword); 
| 该 方法 包含 5 个 参数 ， 其 中 前 两 个 参数 是 必须 的 。 简 单 说 明 如 下 。 
| bstrMethod: HTTP 方法 字符 串 ， 如 POST、GET 等 ， 大 小 写 不 敏感。 
bstrUrl: 请 求 的 URL 地 址 字符 串 ， 可 以 为 绝对 地 址 或 相对 地 址 。 
varAsync: 布尔 值 ， 可 选 参数 ， 指 定 请 求 是 否 为 异步 方式 ， 默 认为 tue。 如 果 为 真 ， 当 状态 


| 改变 时 会 调用 onreadystatechange 属性 指定 的 回调 函数 。 
| bstrUser: 可 选 参数 ， 如 果 服 务 器 需要 验证 ， 该 参数 指定 用 户 名 ， 如 果 未 指定 ， 当 服务 器 需 
| 要 验证 时 ， 会 弹出 验证 窗口 。 
| bstrPassword: 可 选 参 数 ， 验 证 信息 中 的 密码 部 分 ， 如 果 用 户 名 为 空 ， 则 此 值 将 被 忽略 。 
| 然后 ， 使 用 XMLHttpRequest 的 send0 方 法 发 送 请 求 到 服务 器 端 ， 并 接收 服务 器 的 响应 。send() 
| 方法 用 法 如 下 所 示 。 
| 
| oOXMLHttpRequest.send(varBody); 

参数 varBody 表示 将 通过 该 请 求 发 送 的 数据 ， 如 果 不 传递 信息 ， 可 以 设置 参数 为 null。 

该 方法 的 同步 或 异步 方式 取决 于 open0 方 法 中 的 bAsyne 参数 ， 如 果 bAsync 一 False， 此 方法 将 
会 等 待 请 求 完成 或 者 超时 时 才 会 返回 ， 如 果 bAsync 一 True， 此 方法 将 立即 返回 。 
| 使 用 XMLHttpRequest 对 象 的 responseBody、responseStream、responseText 或 responseXML 属性 
| 可 以 接收 响应 数据 。 

【示例 】 下 面 示例 简单 演示 了 如 何 实现 异步 通信 方法 ， 代 码 省 略 了 定义 XMLHttpRequest 对 象 的 

函数 。 

xmlHttp.open("GET"."server.asp". false): 

xmlHttp.send(nulD): 
| alert(xmlHttp.responseText): 
”在 服务 器 端 文件 (serverasp) 中 输入 下 面 的 字符 串 。 
| Hello World 


在 浏览 器 中 预览 客户 端 交互 页 面 ， 就 会 弹出 一 个 提示 对 话 框 ， 显 示 “Hello World” 的 提示 信息 。 
| 该 字符 串 是 借助 XMLHttpRequest 对 象 建立 的 连接 通道 ， 从 服务 器 端 响应 的 字符 串 。 
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15.1.3 发送 GET 请 求 


发 送 GET 请 求 时 ， 只 需 将 包含 查询 字符 串 的 URL 传 入 open0 方 法 ， 设 置 第 一 个 参数 值 为 GET | 

即 可 。 服 务 器 能 够 在 URL 尾部 的 查询 字符 串 中 接收 用 户 传递 过 来 的 信息 。 | 
使 用 GET 请 求 较 简单 ， 比 较 方便 ， 它 适合 传递 简单 的 信息 ， 不 易 传 输 大 容量 或 加 密 数据 。 | 
【示例 】 下 面 示例 在 页 面 (mainhtml) 中 定义 一 个 请 求 连接 ， 并 以 GET 方式 传递 一 个 参数 信息 

callback = functionName。 


ipt> | 
// 省 略 定义 XMLHttpRequest 对 象 函 数 | 
function request(url) { // 请 求 函数 | 
xmlHttp.open("GET",url, false); 。 // 以 GET 方式 打开 请 求 连接 | 
xmlHttp.send(null); // 发 送 请 求 | 
alert(xmlHttp responseTexb: / 获取 响应 的 文本 字符 串 信 息 | 
叶 
window.onload = functionO { / 页 面 初始 化 | 
varb = document.getElementsByTagName("input")[0]: | 
b.onclick = fonction0 { | 
Var url = "server.asp?callback = functionName" | 
/ 设置 向 服务 器 端 发 送 请 求 的 文件 ， 以 及 传递 的 参数 信息 | 
Tequest(urD); // 调用 请 求 函数 | 
| 
) | 
</script> | 
<hl>Ajax 异步 数据 传输 <hl> 


<input name="submit"type="button" id="submit"value=" 向 服务 器 发 出 请 求 " /> 
在 服务 器 端 文件 〈serverasp) 中 输入 下 面 的 代码 ， 获 取 查 询 字符 串 中 callback 的 参数 值 ， 并 把 该 
值 响应 给 客户 端 。 


<%QLANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 
<% 


callback = Request.QueryString("callback") 
Response. Write(callback) 
%> 
在 浏览 器 中 预览 页 面 ， 当 单 击 提交 按钮 时 ， 会 弹出 一 个 提示 对 话 框 ， 显 示 传 递 的 参数 值 。 
安 提示 : 查询 字符 串通 过 问号 (?) 前 组 附加 在 URL 的 末尾 ， 发 送 数 据 是 以 连 字符 (及) 连接 的 一 
个 或 多 个 名 / 值 对 。 每 个 名 称 和 值 都 必须 在 编码 后 才能 用 在 URL 中 ， 用 户 使 用 JavaScript | 
的 encodeURIComponent(O 函数 对 其 进行 编码 ， 服 务 器 端 在 接收 这 些 数据 时 也 必须 使 用 | 
decodeURIComponent(O 函数 进行 解码 。URL 最 大 长 度 为 2048 字符 (2KB ) 。 | 


15.1.4 发 送 POST 请 求 


POST 请 求 支持 发 送 任意 格式 、 任意 长 度 的 数据 , 一般 多 用 于 表单 提交 。 与 GET 发 送 的 数据 格式 
相似 ，POST 发 送 的 数据 也 必须 进行 编码 ， 并 用 连 字符 (&) 进行 分 隔 ， 格 式 如 下 。 | 
send("namel=valuel &name2=value2..."): 
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在 发 送 POST 请 求 时 ， 参 数 不 会 被 附加 到 URL 的 末尾 ， 而 是 作为 send0 方 法 的 参数 进行 传递 。 
【示例 1】 以 15.1.3 节 示例 为 例 ， 使 用 POST 方法 向 服务 器 传递 数据 ， 定 义 如 下 请 求 函数 。 
function requestturD { 
xmlHttp.open("POST".url. false): 
xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
// 设置 发 送 数据 类 型 
xmlHttp.send("callback=functionName"); 
alert(xmlHttp.responseText); 


在 open0 方 法 中 ， 设 置 第 一 个 参数 为 POST， 然 后 使 用 setRequestHeader0 方 法 设置 请 求 消息 的 内 
容 类 型 为 “application/x-www-form-urlencoded”， 一 般 使 用 POST 发 送 请 求 时 都 必须 设置 该 选项 ， 否 
则 服务 器 会 无 法 识别 传递 过 来 的 数据 。 
次 提示 : setRequestHeader() 方 法 的 用 法 如 下 。 

xmlhttp.setRequestHeader("Header-name", "value"); 
- 般 设置 头 部 信息 中 User-Agent 首部 为 XMLHTTP, 以 便于 服务 器 端 能 够 辨别 出 XMLHttpRequest 

异步 请 求 和 其 他 客户 端 普通 请 求 。 

xmlhttp.setRequestHeader("User-Agent", "XMLHTTP"); 

这 样 就 可 以 在 服务 器 端 编写 脚本 分 别 为 现代 浏览 器 和 不 支持 JavaScript 的 浏览 器 呈现 不 同 的 文档 ， 
以 提高 可 访问 性 的 手段 。 

如 果 使 用 POST 方法 传递 数据 ， 还 必须 设置 另 一 个 头 部 信息 。 

Xmlhttp.setRequestHeader("Content-type ", " application/x-www-form-urlencoded "); 

然后 ， 在 send() 方 法 中 附加 要 传递 的 值 ， 该 值 是 一 个 或 多 个 “名 / 值 ” 对 ， 多 个 “名 / 值 ”对 之 间 使 
用 “&” 分 隔 符 进 行 分 隔 。 在 “名 / 值 ” 对 中 ,“ 名 ”可 以 为 表单 域 的 名 称 〈 与 表单 域 相 对 应 )“ 值 ” 


| 可 以 是 固定 的 值 ， 也 可 以 是 一 个 变量 。 


设置 第 三 个 参数 值 为 false， 关 闭 异步 通信 。 

最 后 ， 在 服务 器 端 设计 接收 POST 方式 传递 的 数据 ， 并 进行 响应 。 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 

<% 

callback = Request.Form("callback") 

Response. Write(callback) 

%> 


用 于 发 送 POST 请 求 的 数据 类 型 (Content Type) 通常 是 application/x-www-form-urlencoded， 这 


| 意味 着 还 可 以 以 text/xml 或 application/xml 类 型 给 服务 器 直接 发 送 XML 数据 , 甚至 以 application/ison 


类 型 发 送 JavaScript 对 象 。 
【示例 2】 下 面 示例 将 向 服务 器 端 发 送 XML 类 型 的 数据 ， 而 不 是 简单 地 串 行 化 名 / 值 对 数据 。 
function request(urD { 
xmlHttp.open("POST".url. false): 
xmlHttp.setRequestHeader('Content-type','text/xml"); // 设置 发 送 数 据 类 型 
xmlHttp.send("<bookstore><book id='1> 书 名 1</book><book id=2> 书 名 2</book></bookstore>"): 
上 


。404 。 


第 15 章 JavaScript 通信 mS I 
i 3 T 


容 提示 : 由 于 使 用 GET 方式 传递 的 信息 量 是 非常 有 限 的 ， 而 使 用 POST 方式 所 传递 的 信息 是 无 限 
的 ， 且 不 受 字符 编码 的 限制 ， 还 可 以 传递 二 进 制 信息 。 对 于 传输 文件 ， 以 及 大 容量 信息 时 
多 采用 POST 方式 。 另 外 ， 当 发 送 安全 信息 或 XML 格式 数据 时 ， 也 应 该 考虑 选用 这 种 方 | 
法 来 实现 。 | 


15.1.5 “转换 串 行 化 字符 串 


GET 和 了 POST 方法 都 是 以 名 值 对 字符 串 的 形式 发 送 数据 。 
1. 传输 名 / 值 对 信息 


与 JavaScript 对 象 结构 类 似 , 多 在 GET 参数 中 使 用 。 例 如 , 下 面 是 一 个 包含 3 对 名 / 值 的 JavaScript | 
对 象 数 据 。 


四 


User: "Ccs8", 
padd: "123456", 
email: "css8@mysite.cn" 


} 
将 上 面 原生 JavaScript 对 象 数据 转换 为 串 行 格式 显示 为 如 下 所 示 。 
User: "ccs8"&padd: "123456"&email: "css8@mysite.cn" 


2. 传输 有 序数 据 列表 

与 JavaScript 数组 结构 类 似 ， 多 在 一 系列 文本 框 中 提交 表单 信息 时 使 用 ， 它 与 上 一 种 方式 不 同 ， 
所 提交 的 数据 按 顺 序 排列 ， 不 可 以 随意 组 合 。 例 如 ， 下 面 是 一 组 有 序 表单 域 信息 ， 它 包含 多 个 值 。 

[ 


{name: "text", value: "css8"}, 
{name: "text", value: "123456"}. 
{name: "text", value: "css8(@mysite.cn"} 
] 
将 上 面 有 序 表单 数据 转换 为 串 行 格式 显示 如 下 。 
text: "ccs8"& text: "123456"& text: "css8@mysite.cn" 
【示例 】 下 面 示例 定义 一 个 函数 负责 把 数据 转换 为 串 行 格式 提交 ， 详 细 代码 如 下 。 
/ 把 数组 或 对 象 类 型 数据 转换 为 串 行 字符 串 
/ 参数 :data 表示 数组 或 对 象 类 型 数据 
/ 返回 值 ， 串 行 字符 串 
function toString(data) { 
var a=[]: 
半 (data.constructor 一 Array) {// 如 果 是 数组 ， 则 遍历 读 取 元 素 的 属性 值 ， 并 存 入 数组 
for (vari= 0:;i< datalength: i++) { 
apush(data[i].name + "=" + encodeURIComponent(data[i].value)): 


} // 如 果 是 对 象 ， 则 遍历 对 象 ， 读 取 每 个 属性 值 ， 存 入 数组 
else{ 
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| TD 
| 起 
| 要 
for (var iin data) { 
| apush(i + "=" + encodeURIComponent(data[i])); 
Re 
g | 
全 站 | Tetum a.join("&"); // 把 数组 转换 为 串 行 字符 串 ， 并 返回 
Ss } 


15.1.6 ”跟踪 状态 


使 用 XMLHttpRequest 对 象 的 readyState 属性 可 以 实时 跟踪 异步 交互 状态 。 一 旦 当 该 属性 发 生变 
化 时 ， 就 触发 readystatechange 事件 ， 调 用 该 事件 绑 定 的 回调 函数 。readyState 属性 包括 5 个 值 ， 详 细 


| 表 15.1 readyState 属性 值 
说 明 
未 初始 化 。 表 示 对 象 已 经 建立 ， 但 是 尚未 初始 化 ， 尚 未 调用 open0 方 法 
初始 化 。 表 示 对 象 已 经 建立 ， 尚 未 调用 send0 方 法 
发 送 数据 。 表 示 send0 方 法 已 经 调用 ， 但 是 当前 的 状态 及 HTTP 头 未 知 
数据 传送 中 .已 经 接收 部 分 数据 ,因为 响应 及 HTTP 头 不 全 ,这 时 通过 responseBody 和 responseText 
获取 部 分 数据 会 出 现 错误 
完成 。 数 据 接收 完毕 ， 此 时 可 以 通过 responseBody 和 responseText 获取 完整 的 响应 数据 


如 果 readyState 属性 值 为 4， 则 说 明 响 应 完毕 ， 那 么 就 可 以 安全 读 取 返回 的 数据 。 另 外 ， 还 需要 
监测 HTTP 状态 码 ， 只 有 当 HTTP 状态 码 为 200 时 ， 才 表示 HTTP 响应 顺利 完成 。 

在 XMLHttpRequest 对 象 中 可 以 借助 status 属性 获取 当前 的 HTTP 状态 码 。 如 果 readyState 属性 
值 为 4， 且 status〈 状 态 码 ) 属性 值 为 200， 那 么 说 明 HTTP 请 求 和 响应 过 程 顺利 完成 。 

【示例 】 定 义 一 个 函数 handleStateChange0， 用 来 监测 HITP 状态 ， 当 整个 通信 顺利 完成 ， 则 读 

| 取 xmlhttp 的 响应 文本 信息 。 
function handleStateChangeO { 

if(xmlHttp.readyState — 4) { 

if (xmlHttp.status 一 200 || xmlHttp.status — 0) { 
alert(xmlhttp.responseText): 


} 
b 
} 


然后 ， 修 改 request0 〇 函数 ， 为 onreadystatechange 事件 注册 回调 函数 。 
function request(urD { 

XmlHttp.open("GET". url false): 
| xmlHttp.onreadystatechange = handleStateChange: 
| xmlHttp.send(null): 
| 
| 


} 


上 面 代码 把 读 取 响 应 数据 的 脚本 放 在 函数 handleStateChange0 中 ， 然 后 通过 onreadystatechange 
有 件 来 调用 。 
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15.1.7 ”中 止 请 求 


使 用 abort0 方 法 可 以 中 止 正在 进行 的 异步 请 求 。 在 使 用 abort0 方 法 前 ， 应 先 清除 | 加 并 流产 
onreadystatechange 事件 处 理 函数 ， 因 为 IE 和 Mozilla 在 请 求 中 止 后 也 会 激活 这 个 事件 处 理 函数 , 如 | 国 久 
果 给 onreadystatechange 属性 设置 为 null, 则 正 会 发 生 异 常 , 所 以 可 以 为 它 设置 一 个 空 函 数 , 代码 如 下 。 Er 

Xmlhttp.onreadystatechange = function() {}; 

xmlhttp.abort(); 


15.1.8 获取 XML 数据 


XMLHttpRequest 对 象 通 过 responseText、responseBody、responseStream 或 responseXML 属性 获 
取 响 应 信息 ， 说 明 如 表 15.2 所 示 ， 它 们 都 是 只 读 属性 。 


表 15.2 XMLHttpRequest 对 象 响应 信息 属性 


将 响应 信息 正文 以 Unsigned Byte 数组 形式 返回 


responseStream 以 ADO Stream 对 象 的 形式 返回 响应 信息 
TesponseText 将 响应 信息 作为 字符 串 返 回 
将 响应 信息 格式 化 为 XML 文档 格式 返回 


在 实际 应 用 中 ， 一 般 将 格式 设置 为 XML、HTML、JSON 或 其 他 纯 文 本 格式 。 具 体 使 用 哪 种 响应 | 
格式 ， 可 以 参考 下 面 几 条 原则 。 | 
回 ” 如 果 向 页 面 中 添加 大 块 数据 时 ， 选 择 HTML 格式 会 比较 方便 。 | 
加 ”如 果 需 要 协作 开发 ， 且 项 目 庞杂 ， 选 择 XML 格式 会 更 通用 。 | 
回 ”如 果 要 检索 复杂 的 数据 ， 且 结构 复杂 ， 那 么 选择 JSON 格式 轻便 。 | 
XML 是 使 用 最 广泛 的 数据 格式 。 因 为 XML 文档 可 以 被 很 多 编程 语言 支持 ， 而 且 开发 人 员 可 以 | 
使 用 比较 熟悉 的 DOM 模型 来 解析 数据 ， 其 缺点 在 于 服务 器 的 响应 和 解析 XML 数据 的 脚本 可 能 变 得 
相当 元 长 ， 查 找 数据 时 不 得 不 遍历 每 个 节点 。 
【示例 1】 在 服务 器 端 创建 一 个 简单 的 XML 文档 (XML_server.xml)。 


<?xml Version="1.0" encodine="gb2312"?> 


<the>XML 数据 </the > | 
然后 在 客户 端 进行 如 下 请 求 (XML main html)。 
varx=createXMLHTTPObjectO: // 创建 XMLHttpRequest 对 象 


var url = "XML server.xml": 
xXx.open("GET". url true): 
x.onreadystatechange = function| { 
if (x.readyState — 4 && x.status — 200) { 
Var info = x.responseXML: 
alert(info.getElementsByTagName("the")[0] firstChild.data): 
/ 返回 元 信息 字符 串 "XML 数据 " 


= 


x.send(null); 
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| 在 上 面 的 代码 中 使 用 XML DOM 提供 的 getElementsByTagName( 方 法 获取 the 节点 , 然后 再 定位 
| 第 一 个 the 节点 的 子 节点 内 容 。 此 时 如 果 继 续 使 用 responseText 属性 来 读 取 数 据 ， 则 会 返回 XML 源 
| 代码 字符 串 ， 如 下 所 示 。 


| 
| xml version="1.0" encoding="gb2312"?> 
| <the>XML 数据 </the > 
【示例 2】 也 可 以 使 用 服务 器 端 脚本 生成 XML 文档 结构 。 例 如 ， 以 ASP 脚本 生成 上 面 的 服务 器 
| | 端 响应 信息 息 。 
<?xml version="1.0" encoding="gb2312"?> 
<% 
| Response.ContentType = "text/xml” // 定义 XML 文档 文本 类 型 ， 否 则 正 浏览 器 将 不 识别 
| Response Wiite("<the>XML 数据 </the >") 
| %> 


窟 提示: 对 于 XML 文档 数据 来 说 ， 第 一 行 必须 是 <?xml version="1.0" encoding="gb2312"?>， 该 行 
命令 表示 输出 的 数据 为 XML 格式 文档 ， 同 时 标识 了 XML 文档 的 版 本 和 字符 编码 。 为 了 
能 够 兼容 正和 FF 等 浏览 器 ， 能 让 不 同 浏览 器 都 可 以 识别 XML 文档 ， 还 应 该 为 响应 信息 
定义 XML 文本 类 型 。 最 后 根据 XML 语法 规范 编写 文档 的 信息 结构 。 然 后 ， 使 用 上 面 的 
示例 代码 请 求 该 服务 器 端 脚本 文件 ， 同 样 能 够 显示 元 信息 字符 串 "XML 数据 "。 


| 设计 响应 信息 为 HTML 字符 串 是 一 种 常用 方法 ， 这 样 在 客户 端 就 可 以 直接 使 用 innerHTML 属性 
把 获取 的 字符 串 插入 到 网 页 中 。 

| 【示例 】 在 服务 器 端 设计 响应 信息 为 HTML 结构 代码 HTML _server html)。 

| 


<table> 
<tr><td>RegExp.exec0</td><td> 通 用 的 匹配 模式 </td></tr> 

| <tr><td>RegExp.test0</td><td> 检 测 一 个 字符 串 是 否 匹 配 某 个 模式 </td> 

</t> 
</table> 
| 然后 在 客户 端 可 以 这 样 来 接收 响应 信息 (HTML _main html)。 

div id="grid"></div> 
| <scrip> 
| function createXMLHTTPObjectO { 
| // 省略 
) 
varx=createXMLHTTPObjectO: // 创建 XMLHttpRequest 对 象 
varurl = "HTML server.html": 
xX.open("GET", url true); 
x.onreadystatechange = functionO { 

if (x.readyState == 4 && x.status — 200) { 

| Var 0 = document.getElementById("grid"): 
| 0.innerHTML = xresponseText:; // 把 响应 数据 直接 插入 到 页 面 中 进行 显示 
| } 
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} 
xX.send(null); 
</script> 
在 某 些 情况 下 ， HTML 字符 串 可 能 为 客户 端 解析 响应 信息 节省 了 一 些 JavaScript 脚本 ， 但 是 也 | 
带 来 一 些 问题 。 | 
响应 信息 中 包含 大 量 无 用 的 字符 ， 响 应 数据 会 变 得 很 腔 肿 。 因 为 HTML 标记 不 含有 信息 ， 
完全 可 以 把 它们 放置 在 客户 端 由 JavaScript 脚本 负责 生成 。 | 
响应 信息 中 包含 的 HTML 结构 无 法 有 效 利用 ,对 于 JavaScript 脚本 来 说 , 它们 仅仅 是 一 堆 字 | 
符 串 。 同 时 结构 和 信息 混合 在 一 起 ， 也 不 符合 标准 设计 原则 。 | 


15.1.10 获取 JavaScript 脚本 
可 以 设计 响应 信息 为 JavaScript 代码 ,这 里 的 代码 与 JSON 数据 不 同 , 它 是 可 执行 的 命令 或 脚本 。 | 视频 讲解 
【示例 】 在 服务 器 端 请 求 文件 中 包含 下 面 一 个 函数 (Code_serverjs)。 

var d=new Date() 
Tetum dtoStringO: 


然后 在 客户 端 执 行 下 面 的 请 求 。 


varx=createXMLHTTPObjectO: // 创建 XMLHttpRequest 对 象 
Var url = "code_server.js":; 
x.open("GET", url, true): 
x.onreadystatechange = functionO { 
if (x.readyState == 4 && x.status — 200) { 
Var info = x.responseText: 
Var 0 = eval("("+info+")" + "O"); 
/ 调用 eval0 方 法 把 JavaScript 字符 串 转 换 为 本 地 脚本 
alert(0): // 返回 客户 端 当前 日 期 


} 


} 

x.send(null); 

在 转换 时 应 在 字符 串 前 后 附加 两 个 小 括号 : 一 个 是 包含 函数 结构 体 的 ， 一 个 是 表示 调用 函数 的 。 
一 般 很 少 使 用 JavaScript 代码 作为 响应 信息 的 格式 , 因为 它 不 能 够 传递 更 丰富 的 信息 , 同时 JavaScript 
脚本 极 易 引发 安全 隐患 。 


15.1.11 获取 JSON 数据 


通过 XMLHttpRequest 对 象 的 responseText 属性 获取 返回 的 JSON 数据 字符 串 , 然 后 可 以 使 用 eval0 
方法 将 其 解析 为 本 地 JavaScript 对 象 ， 从 该 对 象 中 再 读 取 任何 想 要 的 信息 。 
【示例 】 下 面 的 实例 将 返回 的 JSON 对 象 字 符 串 转换 为 本 地 对 象 ， 然 后 读 取 其 中 包含 的 属性 
值 (JSON_main html)。 
varx=createXMLHTTPObjectO: // 创建 XMLHttpRequest 对 象 
var url = "JSON _serverjs": / 请 求 的 服务 器 端 文件 
x.open("GET", ul tme): 
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| x.onreadystatechange = function() { 

| if(x.readyState 一 4&& x.status — 200) { 

| varinfo =xTesponseText 。”// 获取 响应 信息 

| Var 0 二 eval("("+info+")"); // 调用 eval0 方 法 把 JSON 字符 串 转换 为 本 地 对 象 


全 内 alert(info): // 显示 响应 的 字符 串 ， 返 回 整个 JSON 对 象 字符 串 
~ | alert(o.name); // 读 取 对 象 属性 值 ， 返 回 字符 串 "css8" 
| 加 四 
| X.SendnulD: 


在 转换 对 象 时 ， 应 该 在 JSON 对 象 字符 串 外 面包 含 小 括号 运算 符 ， 表 示 调 用 对 象 的 意思 。 如 果 是 
数组 ， 则 可 以 这 样 读 取 (JSON_mainl.html): 


X.Onreadystatechange = fonction0 { 
if (x.readyState == 4 && x.status — 200) { 
Var info = x.responseText: 
var 0 = eval(info): 
alert(info): // 显示 响应 的 字符 串 ， 返 回 整个 JSON 对 象 字符 串 
alert(o[0].name); ”// 读 取 第 一 个 数组 元 素 值 的 属性 值 ， 返 回 字符 串 "css8" 


| 痊 提 示 : eval0 方 法 在 解析 JSON 字符 囊 时 存在 安全 隐患。 如 果 JSON 字符 事 中 包含 恶意 代码 ， 在 
| 调用 回调 函数 时 可 能 会 被 执行 。 

| 解决 方法 : 使 用 一 种 能 够 识别 有 效 JSON 语法 的 解析 程序 ， 当 解析 程序 一 旦 匹配 到 JSON 字符 中 
| 中 包含 不 规范 的 对 象 ， 会 直接 中 断 或 者 不 执行 其 中 的 恶意 代码 。 用 户 可 以 访问 htpy/wwwjson org/ 
| json2js 免费 下 载 JavaSeript 版 本 的 解析 程序 。 不 过 如 果 确信 所 响应 的 JSON 字符 串 是 安全 的 ,没有 被 
| 人 恶意 攻击 ， 那 么 可 以 使 用 eval0 方 法 解析 JSON 字符 串 。 


15.1.12 ”获取 纯 文本 


视频 讲解 | 对 于 简短 的 信息 ， 有 必要 使 用 纯 文 本 格式 进行 响应 。 但 是 纯 文本 信息 在 响应 时 很 容易 丢失 ， 且 没 
| 有 办 法 检测 信息 的 完整 性 。 因 为 元 数据 都 以 数据 包 的 形式 进行 发 送 ， 不 容易 丢失 。 
| 【示例 】 服 务 器 端 响应 信息 为 字符 串 "tmue"， 则 可 以 在 客户 端 这 样 设计 。 


| VarX= createXMLHTTPObjectO: 
| var url = "Text_server.txt": 
| xX.open("GET", url, tme): 

x.onreadystatechange = fonction0 { 

if (x.readyState — 4 && x.status — 200) { 
| Var info = x.response Text: 
| 站 (info 一 "true") alert(" 文 本 信息 传输 完整 ): / 检测 信息 是 否 完整 
| else alert(" 文 本 信息 可 能 存在 丢失 "): 
bi 

} 
| x.send(null); 
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15.1.13 ”获取 头 部 信息 


每 个 HTTP 请 求 和 响应 的 头 部 都 包含 一 组 消息 , 对 于 开发 人 员 来 说 ,获取 这 些 信息 具有 重要 的 参 | 
考 价值 。XMLHttpRequest 对 象 提供 了 两 个 方法 用 于 设置 或 获取 头 部 信息 。 | 
getAllResponseHeaders0): 获取 响应 的 所 有 HTTP 头 信息 。 
getResponseHeader0: 从 响应 信息 中 获取 指定 的 HTTP 头 信息 。 

【示例 1】 下 面 示例 将 获取 HTTP 响应 的 所 有 头 部 信息 。 
VarxX=createXMLHTTPObjectO: 
Var Url = "server.txt"; 
xXx.open("GET", url true): 
x.onreadystatechange = functionO { 
if (x.readyState == 4 && x.status — 200) { 
alert(x.getAllResponseHeaders0); ”// 获取 头 部 信息 


} | 

} | 
x.send(null); | 
【示例 2】 下 面 是 一 个 返回 的 头 部 信息 示例 ， 具 体 到 不 同 的 环境 和 浏览 器 ， 返 回 的 信息 会 略 有 | 

不 同 。 | 
X-Powered-By: ASPNET 


Content-Type: text/plain 

ETag: "0b76f78d2b8c91: 8e7" 

Content-Length: 2 

Last-Modified: Thu, 09 Apr 2017 05: 17: 26 GMT 

如 果 要 获取 指定 的 某 个 首部 消息 ， 可 以 使 用 getResponseHeader() 方 法 ， 参 数 为 获取 首部 的 名 称 。 
例如 ， 获 取 Content-Type 首部 的 值 ， 则 可 以 这 样 设计 。 

alert(x.getResponseHeader("Content-Type")): 


| 
除了 可 以 获取 这 些 头 部 信息 外 , 还 可 以 使 用 setRequestHeader() 方 法 在 发 送 请 求 中 设置 各 种 头 部 | 
| 


信息 。 


xmlHttp.setRequestHeader("name","css8"); 
xmlHttp.setRequestHeader("level"."2"): 


| 
服务 器 端 就 可 以 接收 这 些 自 定义 头 部 信息 ， 并 根据 这 些 信息 提供 特殊 的 服务 或 功能 。 | 


15.2 XMLHttpRequest 2.0 基础 


2014 年 11 月 W3C 正式 发 布 XMLHttpRequest Level 2 标准 规范 ， 新 增 了 很 多 实用 功能 ， 极 大 地 
推动 了 异步 交互 在 JavaScript 中 的 应 用 。 老 版 本 的 XMLHttpRequest 插件 存在 以 下 缺陷 。 

只 支持 文本 数据 的 传送 ， 无 法 用 来 读 取 和 上 传 二 进 制 文件 。 

回 ” 传 送 和 接收 数据 时 ， 没 有 进度 信息 ， 只 能 提示 有 没有 完成 。 

受到 同 域 限制 ， 只 能 向 同一 域名 的 服务 器 请 求 数据 。 
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XMLHttpRequest 2 做 出 了 大 幅 改进 ， 简 单 说 明 如 下 。 
可 以 设置 HTTP 请 求 的 时 限 。 

可 以 使 用 FormData 对 象 管理 表单 数据 。 

可 以 上 传 文件 。 

可 以 请 求 不 同 域名 下 的 数据 〈 跨 域 请 求 ) 。 

可 以 获取 服务 器 端的 二 进 制 数据 。 

可 以 获得 数据 传输 的 进度 信息 。 


15.2.1 请 求 时 限 


办 办 办 办 办 凶 


| XMLHttpRequest 2 为 XMLHttpRequest 对 象 新 增 timeout 属性 ， 使 用 该 属性 可 以 设置 HTTP 请 求 
| 时 限 。 

xhr.timeout = 3000; 

上 面 语句 将 异步 请 求 的 最 长 等 待 时 间 设 为 3000 毫秒 。 超 过 时 限 ， 就 自动 停止 HTTP 请 求 。 

与 之 配套 的 还 有 一 个 timeout 事件 ， 用 来 指定 回调 函数 。 


xhr.ontimeout = function(event) { 
alert(' 请 求 超时 ! "); 
岂 


| 
| 15.2.2 ”FormData 数据 对 象 
XMLHttpRequest 2 新 增 FormData 对 象 ， 使 用 它 可 以 处 理 表单 数据 ， 使 用 方法 如 下 。 
(1) 新 建 FormData 对 象 。 
var formData = new FormData(); 
(2) 为 FormData 对 象 添加 表单 项 。 
formData.append(username', ' 张 三 "); 
formData.append('id', 123456): 
(3) 直接 传送 FormData 对 象 。 这 与 提交 网 页 表单 的 效果 完全 一 样 。 
xhr.send(formData): 
(4) FormData 对 象 也 可 以 用 来 获取 网 页 表单 的 值 。 


| 
| Var form = document.getElementById(myform"): 
| var formData = new FormData(form): 
formData.append('secret', '123456"); // 添加 一 个 表单 项 
xhr.open('POST.. form.action): 

xhr.send(formData): 


1523 上 传 文件 


| 新 版 XMLHttpRequest 对 象 不 仅 可 以 发 送 文本 信息 ， 还 可 以 上 传 文件 。XMLHttpRequest 的 send0O) 
| 7 可 以 过 字 条 Document 对 象 、 表 单数 据 、Blob 对 象 、 文 件 以 及 ArrayBuffer 对 象 。 
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【示例 】 设 计 一 个 "选择 文件 "的 表单 元 素 (input[type="file"])， 将 它 装 入 FormData 对 象 。 
Var formData = new FormData(); 
for (var i= 0:; i < files.length: i++) { 
formData.append('files[]". files[i]); 
由 
然后 ， 发 送 FormData 对 象 给 服务 器 。 


Xhrsend(formData): 


15.2.4 ” 跨 域 访问 


新 版 本 的 XMLHttpRequest 对 象 ， 可 以 向 不 同 域名 的 服务 器 发 出 HTTP 请 求 。 使 用 跨 域 资 源 共享 | 
的 前 提 是 : 浏览 器 必须 支持 这 个 功能 ， 且 服务 器 端 必须 同意 这 种 跨 域 。 如 果 能 够 满足 上 面 两 个 条 件 ， 
则 代码 的 写法 与 不 跨 域 的 请 求 完全 一 样 。 

xXhropen(CGET', ‘http: // other.server/and/path/to/script’): 


15.2.5 ”响应 不 同类 型 数据 


新 版 本 的 XMLHttpRequest 对 象 新 增 responseType 和 response 属性 。 

TesponseType: 用 于 指定 服务 器 端 返回 数据 的 数据 类 型 , 可 用 值 为 text、 araybuffer、 blob、 json 
或 document。 如 果 将 属性 值 指 定 为 空 字符 串 值 或 不 使 用 该 属性 ， 则 该 属性 值 默认 为 text。 

response: 如 果 向 服务 器 端 提交 请 求 成 功 ， 则 返回 响应 的 数据 。 
> 如果 reaponseType 为 text 时 ， 则 reaponse 返回 值 为 一 串 字 符 串 。 

如 果 reaponseType 为 arraybuffer 时 ， 则 reaponse 返回 值 为 一 个 ArrayBuffer 对 象 。 

如 果 reaponseType 为 blob 时 ， 则 reaponse 返回 值 为 一 个 Blob 对 象 。 

如 果 reaponseType 为 json 时， 则 reaponse 返回 值 为 一 个 Json 对 象 。 

如 果 reaponseType 为 document 时 ， 则 reaponse 返回 值 为 一 个 Document 对 象 。 


15.2.6 ”接收 二 进 制 数据 


老 版 本 的 XMLHttpRequest 对 象 ， 只 能 从 服务 器 接收 文本 数据 ， 新 版 本 则 可 以 接收 二 进 制 数 据 。 | 

使 用 新 增 的 responseType 属性 ， 可 以 从 服务 器 接收 二 进 制 数 据 。 如 果 服务 器 返回 文本 数据 ， 这 个 | 
属性 的 值 是 text， 这 是 默认 值 。 | 

可 以 把 responseType 设 为 blob， 表 示 服 务 器 传 回 的 是 二 进 制 对 象 。 | 

var xhr = new XMLHttpRequestO: 

xhr.open('GET, ‘/path/to/image.png’); 

xhr.responseType = "blob': 

接收 数据 时 ， 用 浏览 器 自 带 的 Blob 对 象 即 可 。 


varblob = new Blob([xhr.response]. {type: image/png’}): 


视频 讲解 


| 
| 
| 
| 
人 


VvyvyY 


< 乓 注意 : 是 读 取 xhrresponse， 而 不 是 xhr.responseText. 
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可 以 将 responseType 设 为 arraybuffer， 把 二 进 制 数 据 装 在 一 个 数组 中 。 
varxhr=newXMLHttpRequestO: 
Xhropen(CGET', ‘/path/to/image.png’); 

全 | xhrresponseType = "arraybuffer"; 

”接收 数据 时 ， 需 要 遍历 这 个 数组 。 
Var arrayBuffer = xhr.response; 

| if (arrayBuffer) { 

VarbyteArray = new Uint8Array(arrayBuffer); 
for (var i= 0; i < byteArray.byteLength; i++) { 


/ 执行 代码 
| } 
| | 
| 
3 15.2.7 ”监测 数据 传输 进度 
让 | 
视频 讲解 | 新 版 本 的 XMLHttpRequest 对 象 新 增 一 个 progress 事件 ， 用 来 返回 进度 信息 。 它 分 成 上 传 和 下 载 
| 两 种 情况 。 下 载 的 progress 事件 属于 XMLHttpRequest 对 象 ， 上 传 的 progress 事件 属于 
| XMLHttpRequestupload 对 象 。 


(1) 先 定义 progress 事件 的 回调 函数 。 
xhr.onprogress = updateProgress; 
xhr.upload.onprogress = updateProgress: 

(2) 在 回调 函数 里 面 ， 使 用 这 个 事件 的 一 些 属性 。 
function updateProgress(event) { 


if (event.lengthComputable) { 
Var percentComplete = event.loaded / event.total: 
EE 


} 


| 上 面 的 代码 中 ，event.total 是 需要 传输 的 总 字 节 ，event.loaded 是 已 经 传输 的 字 节 。 如 果 
| event.lengthComputable 不 为 真 ， 则 event.total 等 于 0。 

| 与 progress 事件 相关 的 ， 还 有 其 他 5 个 事件 ， 可 以 分 别 指定 回调 函数 。 

load: 传输 成 功 完成 。 

abort: 传输 被 用 户 取消 。 

error: 传输 中 出 现 错误 。 

loadstart: 传输 开始 。 

loadEnd: 传输 结束 ， 但 是 不 知道 成 功 还 是 失败 。 


15.3 案例 实战 


图 图 图 图 加 


| 本 节 以 及 后 面 示例 以 Windows 操 作 系统 +Apache 服 务 器 + PHP 开 发 语言 组 合 框架 为 基础 进行 演示 
| 说 明 。 如 果 读 者 的 本 地 系统 没有 搭建 PHP 虚拟 服务 器 ， 建 议 先 搭建 该 虚拟 环境 之 后 ， 再 详细 学 习 本 
| 节 内 容 。 

| 
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15.3.1 接收 ArrayBuffer 对 象 


当 XMLHttpRequest 对 象 的 responseType 属性 设置 为 araybuffer 时 , 服务 回 党 
器 端 响应 数据 将 是 一 个 ArrayBuffer 对 象 。 

目前 ，Firefox 8+、Opera 11.64+、Chrome 10+、Safari S+ 和 IE 10+ 版 本 浏 es: 
览 器 支持 将 XMLHttp Request 对 象 的 responseType 属性 值 指定 为 arraybuffer。 线 上 阅读 

示例 演示 请 扫 码 阅读 。 


15.3.2 ”接收 Blob 对 象 


当 XMLHttpRequest 对 象 的 responseType 属性 设置 为 blob 时 , 服务 器 端 响应 数据 将 
是 一 个 Blob 对 象 。 目 前 ，Firefox 8+、Chrome 19+、Opera 18+ 和 IE 10+ 版 本 的 浏览 器 支 
持 将 XMLHttpRequest 对 象 的 responseType 属性 值 指定 为 blob。 

示例 演示 请 扫 码 阅读 。 


15.3.3 ”发 送 字符 串 


为 XMLHttpRequest 对 象 设置 responseType = 'text'， 可 以 向 服务 器 发 送 字符 串 


数据 


示例 演示 请 扫 码 阅读 。 
15.3.4 ”发 送 表单 数据 


使 用 XMLHttpRequest 对 象 发 送 表 单数 据 时 ， 需 要 创建 一 个 FotmData 对 象 ， 用 法 如 下 。 

Var form = document.getElementById("forml"):; 

var formData = new FormData(form); 

FormData0 构 造 函 数 包含 一 个 参数 ， 表 示 页 面 中 的 一 个 表单 form) 元素。 

创建 formData 对 象 之 后 ， 把 该 对 象 传递 给 XMLHttpRequest 对 象 的 send() 方 法 即 可 。 用 法 如 下 。 

Xhrsend(formData): 

使 用 formData 对 象 的 append(O 方 法 可 以 追加 数据 ,这 些 数 据 将 在 向 服务 器 端 发 送 数据 时 随 着 用 户 
在 表单 控件 中 输入 的 数据 一 起 发 送 到 服务 器 端 。append( 方 法 的 用 法 如 下 。 

formData.append('add_data', "测试 ); “// 在 发 送 之 前 添加 附加 数据 

该 方法 包含 两 个 参数 : 第 一 个 参数 表示 追加 数据 的 键 名 ， 第 二 个 参数 表示 追加 数据 的 键 值 。 

当 formData 对 象 中 包含 附加 数据 时 , 服务 器 端 将 该 数据 的 键 名 视 为 一 个 表单 控件 
的 name 属性 值 ， 将 该 数据 的 键 值 视 为 该 表单 控件 中 的 数据 。 

示例 演示 请 扫 码 阅读 。 


15.3.5 ”发 送 二 进 制 文件 


使 用 FormData 可 以 向 服务 器 端 发 送 文件 ， 具 体 用 法 : 将 表单 的 enctype 属性 值 设 
置 为 "multipartform-data"， 然 后 将 需要 上 传 的 文件 作为 附加 数据 添加 到 formData 对 象 
中 即 可 。 

示例 演示 请 扫 码 阅读 。 
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15.3.6 发送 Blob 对 象 
3 回 回 


| A 所 有 File 对 象 都 是 一 个 Blob 对 象 ， 所 以 同样 可 以 通过 发 送 Blob 对 象 的 
| L 方法 来 发 送 文件 。 
人 由 示例 演示 请 扫 码 阅读 。 
| 15.3.7 ” 跨 域 请 求 
跨 域 通信 实现 方法 : 在 被 请 求 域 中 提供 一 个 用 于 响应 请 求 的 服务 器 端 脚本 文件 ， 
并 且 在 服务 器 端 返回 响应 的 响应 头 信息 中 添加 Access-Control-Allow- Origin 参数 , 同 


时 将 参数 值 指定 为 允许 向 该 页 面 请 求 数据 的 域名 + 端口 号 即 可 。 
示例 演示 请 扫 码 阅读 。 


15.3.8 设计 文件 上 传 进度 条 


本 例 需 要 PHP 服务 器 虚拟 环境 ， 同 时 在 站 点 根 目录 下 新 建 upload 文件 夹 ， 然 后 
在 站 点 根 目录 新 建 前 台 文 件 testl.html， 以 及 后 台 文件 testphp。 在 上 传 文件 时 ， 使 用 
XMLHttpRequest 动态 显示 文件 上 传 的 进度 。 

示例 演示 代码 请 扫 码 阅读 。 


15.4 ” 跨 文档 消息 传 通 


在 Web 开发 中 ， 跨 文档 消息 传递 存在 多 种 形式 。 

客户 端 与 服务 器 端 之 间 。 

页 面 与 其 打开 的 新 窗口 之 间 。 

多 窗口 之 间 。 

| 页 面 与 内 钳 这 ame 之 间 。 

| 第 一 种 为 传统 用 法 , 借助 服务 器 技术 实现 , 必须 在 同 源 之 间 通 信 , 而 后 面 3 种 可 以 实现 跨 域 通信 ， 
在 JavaScript 脚本 中 直接 完成 。 


15.4.1 postMessage 基础 


HIML 5 增加 了 在 网 页 文档 之 间 互 相 接收 与 发 送信 息 的 功能 。 使 用 这 个 功能 ， 只 要 获取 到 目标 网 
页 所 在 窗口 对 象 的 实例 ， 不 仅 同 源 网 页 之 间 可 以 互相 通信 ， 甚 至 可 以 实现 跨 域 通信 。 

在 HTML5 中 , 跨 域 通信 的 核心 是 postMessage0 方 法 ， 该 方法 的 主要 功能 是 向 另 一 个 地 方 传递 数 
据 。 另 一 个 地 方 可 以 是 包含 在 当前 页 面 中 的 这 ame 元 素 , 或 者 由 当前 页 面 弹出 的 窗口 ， 以 及 框架 集中 
其 他 窗口 。postMessage0 方 法 的 用 法 如 下 。 

otherWindow.postMessage(message.origin): 

参数 说 明 如 下 。 
| 回 otherWindow: 表示 发 送 消息 的 目标 窗口 对 象 。 


图 图 加 加 
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message: 发 送 的 消息 文本 , 可 以 是 数字 、 字 符 串 等 .HTMLS5 规范 定义 该 参数 可 以 是 JavaScript 
的 任意 基本 类 型 或 者 可 复制 的 对 象 , 但 是 部 分 浏览 器 只 能 处 理 字符 串 参数 ,考虑 浏览 器 兼容 
性 ， 可 以 在 传递 参数 时 ， 使 用 JSON.stringify0 方 法 对 参数 对 象 序列 化 ， 接 收 数据 后 再 用 
JSON.parse0 方 法 把 序列 号 字符 串 转换 为 对 象 。 | 全 办 
origin: 字符 串 参 数 ， 设 置 目标 窗口 的 源 ， 格 式 为 “协议 + 主机 + 端口 号 [HURI]”，URIL 会 被 | 守 = 
忽略 ， 可 以 不 写 ， 设 置 该 参数 主要 是 为 了 安全 。postMessageO 只 会 将 message 传递 给 指定 窗 | Note 
口 ， 也 可 以 设置 该 参数 为 "*"， 这 样 可 以 传递 给 任意 窗口 ， 如 果 设 置 为 ""， 则 定义 目标 窗口 
与 当前 窗口 同 源 。 | 
目标 窗口 接收 到 消息 之 后 ， 会 触发 window 对 象 的 message 事件 。 这 个 事件 以 异步 形式 触发 ， 因 | 
此 从 发 送 消息 到 接受 消息 ， 即 触发 目标 窗口 的 message 事件 ， 可 能 存在 延迟 现象 。 | 
触发 message 事件 后 ， 传 递 给 message 处 理 程序 的 事件 对 象 包含 3 个 重要 信息 。 | 
data: 作为 postMessage() 方 法 第 一 个 参数 传 入 的 字符 串 数据 。 
origin: 发 送 消息 的 文档 所 在 域 。 
source: 发 送 消息 的 文档 的 window 对 象 的 代理 。 这 个 代理 对 象 主要 用 于 在 发 送 上 一 条 消息 
的 窗口 中 调用 postMessage() 方 法 .如 果 发 送 消息 的 窗口 来 自 同一 个 域 , 该 对 象 就 是 window。 
< 注意 : eventsource 只 是 window 对 象 的 代理 ， 不 是 引用 window 对 象 。 用 户 可 以 通过 这 个 代理 调 
用 postMessage0 方 法 ， 但 不 能 访问 window 对 象 的 任何 信息 。 
目前 ，Firefox 4+、Safari 4+、Chrome 8+、Opera 10+、IE 8+ 版 本 浏览 器 都 支持 这 种 跨 文档 的 消息 
传输 方式 。 
【 示例】 下面 代码 段 定义 了 HTML 5 页 面 与 内 嵌 框 架 页 面 之 间 通 信 的 基本 设计 模式 。 
// 发 消息 页 面 


Var iframWindow = document.getElementById("myframe"): 
过 amWindow.postMessage(" 发 送 消息 ", "http: // www.othersite.com"); 


// 接 消息 页 面 | 
var EventUtil = {// 定义 事件 处 理 基 本 模块 | 
addHandler: function(element, type, handler) { // 注册 事件 | 
if (element.addEventListener) { // 兼容 DOM 模型 | 
element.addEventListener(type, handler false): | 
} else if (element.attachEvent) { // 兼容 正 模 型 | 
element.attachEvent("on" + type, handler): | 
} | 
else { /1/ 兼容 传统 模型 | 
element["on" + type] = handler: | 
} | 
1 

$s 


EventUtil.addHandler(window., "message", function(event) { ” // 为 window 注册 message 事件 
// 确保 发 送 消息 的 域 是 已 知 的 域 
if (event.origin 一 "http: // www.mysite.com") { 
// 处 理 接收 到 的 数据 
ProcessMessage(event.data): 
// 可 选 操作 : 向 来 源 窗口 发 送 回执 
event.source.postMessage(" 反 馈 消息 ". event.origin); 


} 
DD); 
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15.4.2 ”案例 : 设计 简单 的 跨 域 通话 


本 节 示 例 演示 了 如 何 实现 跨 文 档 消息 传输 。 示 例 包含 两 个 页 面 : indexhtml 和 
called.html， 其 中 index.html 为 主 叫 页 面 ，called.html 为 被 叫 页 面 。 首 先 ， 主 页 面向 内 
嵌 迫 ame 的 被 叫 页 面 发 送 消息 ， 被 叫 页 面 接收 消息 ， 显 示 在 内 嵌 页 面 中 ， 然 后 向 主 叫 
页 面 回话 消息 。 最 后 ， 主 叫 页 面 接收 消息 后 ， 将 该 消息 显示 在 主页 面 内 。 
| 示例 演示 代码 请 扫 码 阅读 。 


15.4.3 案例 : 设计 跨 域 动态 对 话 


| 
| 本 节 示 例 在 15.4.2 节 示 例 基 础 上 ， 进 一 步 改 进 跨 域 通信 的 互动 功能 。 示 例 包 含 两 
| i 个 页 面 : index.html 和 called.html， 其 中 index.html 为 主 叫 页 面 ，called.html 为 被 叫 页 
面 。 首 先 ， 主 叫 页 面 可 以 通过 底部 的 文本 框 向 被 叫 页 面 发 出 实时 消息 ， 被 叫 页 面 能 够 
在 底部 文本 框 中 进行 动态 回应 。 

示例 演示 代码 请 扫 码 阅读 。 


| 15.4.4 ”案例 : 设计 通道 通信 


通道 通信 机 制 提供 了 一 种 在 多 个 源 之 间 进 行 通信 的 方法 ， 这 些 源 之 间 通 过 端口 
(port) 进行 通信 ， 从 一 个 端口 中 发 出 的 数据 将 被 另 一 个 端口 接收 。 
详细 说 明和 示例 演示 请 扫 码 阅读 。 


15.5 WebSockets 通信 


HTMLS 的 Web Sockets API 能 够 在 Web 应 用 程序 中 实现 : 客户 端 与 服务 器 端 之 间 进 行 非 HTTP 
的 通信 。 它 实现 了 使 用 HTTP 不 容易 实现 的 服务 器 端的 数据 推送 等 智能 通信 技术 ， 因 此 受到 了 高 度 
关注 。 


15.5.1 WebSocket 基础 


WebSocket 是 一 个 持久 化 的 协议 ， 这 是 相对 于 HTTP 非 持久 化 来 说 的 。 

例如 ，HTTP 1.0 的 生命 周期 以 request (请 求 ) 作为 界定 ， 也 就 是 一 个 request、 一 个 response〔 响 
应 )。 对 于 HTTP 协议 来 说 ， 本 次 client (客户 端 ) 与 server (服务 器 端 ) 的 会 话 到 此 结束 ; 而 在 HITP 
1.1 中 ， 稍 微 有 所 改进 ， 即 添加 了 keep-alive， 也 就 是 在 一 个 HITP 连接 中 可 以 进行 多 个 request 请 求 
和 多 个 response 响应 操作 。 

然而 在 实时 通信 中 ，HTTP 并 没有 多 大 的 作用 ，HTTP 只 能 由 client 发 起 请 求 ，server 才能 返回 信 
息 ， 即 server 不 能 主动 向 client 推送 信息 ， 无 法 满足 实时 通信 的 要 求 。 而 WebSocket 可 以 进行 持久 化 
连接 ， 即 client 只 需要 进行 一 次 握手 〈 类 似 request)， 成 功 后 即 可 持续 进行 数据 通信 ， 值 得 关注 的 是 
| WebSocket 能 够 实现 client 与 server 之 间 全 双 工 通信 (双向 同时 通信 )， 即 通信 的 双方 可 以 同时 发 送 和 
| 接收 信息 的 信息 交互 方式 。 
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图 15.1 演示 了 client 和 server 之 间 建 立 websocket 连接 时 握手 部 分 , 这 个 部 分 在 Nodejs 中 可 | 


1. 发 送 Sec-WebSocket-Key 


oe 2. 加 密 返 回 Sec-WebSocket-Accept Ne 
(客户 端 ) | (服务 器 端 ) 
3. 本 地 校 验 | 


图 15.1 websocket 连接 时 握手 示意 图 
client 与 server 建立 socket 时 ， 握 手 的 会 话 内 容 也 就 是 request 与 response 的 过 程 。 


深 提示 : socket 又 称 为 套 接 字 ， 是 基于 W3C 标准 开发 在 一 个 TCP 接口 中 进行 双向 通信 的 技术 ， 通 


常情 况 下 ，socket 用 于 描述 IP 地址 和 端口 ， 是 通信 过 程 中 的 一 个 字符 句柄 。 当 服务 器 端 有 


多 个 应 用 服务 绑 定 一 个 socket 时 ， 通 过 通信 中 的 字符 句柄 ， 实 现 不 同 端口 对 应 不 同 应 用 服 


务 功 能 。 目 前 ， 大 部 分 浏览 器 都 支持 HIML5 的 Web Sockets API. 
具体 步骤 如 下 。 

(1) client 建立 WebSocket 时 ， 向 服务 器 端 发 出 请 求 信 息 。 
GET /chat HITP/1.1 
Host: server.example.com 
/ 告诉 服务 器 现在 发 送 的 是 WebSocket 协议 
Upgrade: websocket 
Connection: Upgrade 
// 下 面 是 一 个 Base64 encode 的 值 ， 这 个 是 浏览 器 随机 生成 的 ， 
/ 用 于 验证 服务 器 端 返回 数据 是 否 是 WebSocket 助理 
Sec-WebSocket-Key: x3JJHMbDLIEzLkh9GBhXDw 一 
Sec-WebSocket-Protocol: chat. superchat 
Sec-WebSocket-Version: 13 
Origin: php.cn 

(2) 服务 器 获取 到 client 请 求 的 信息 后 ， 根 据 WebSocket 协议 对 数据 进行 处 理 并 返回 ， 


对 Sec-WebSocket-Key 进行 加 密 等 操作 。 


HITP/1.1 101 Switching Protocols 

/ 依然 是 固定 的 WebSocket 协议 ， 告 诉 客户 端 即将 升级 的 是 Websocket 协议 ， 
// 而 不 是 mozillasocket、lurnarsocket 或 者 shitsocket 

Upgrade: websocket 

Connection: Up 

// 下 面 则 是 经 过 服务 器 确认 ， 并 且 加 密 过 后 的 Sec-WebSocket-Key， 

// 也 就 是 client 要 求 建立 WebSocket 验证 的 凭证 

Sec-WebSocket-Accept: HSmrcOsMIYUkKAGmm5OPpG2HaGWk = 
Sec-WebSocket-Protocol: chat 


其 中 要 


使 用 WebSockets API 可 以 在 服务 器 与 客户 端 之 间 建 立 一 个 非 HTTP 的 双向 连接 。 这 个 连接 是 实 
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以 十 分 轻松 地 完成 ， 因 为 Nodejs 提供 的 net 模块 已 经 对 socket 套 接 字 做 了 封装 处 理 ， 开发 者 使 用 时 | | 
只 需要 考虑 数据 的 交互 ， 而 不 用 处 理 连接 的 建立 。 
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| 时 的 ， 也 是 永久 的 ， 除 非 被 显 式 关 闭 。 这 意味 着 当 服 务 器 想 向 客户 端 发 送 数 据 时 ， 可 以 立即 将 数据 推 
| 送 到 客户 端的 浏览 器 中 ， 无 须 重新 建立 连接 。 只 要 客户 端 有 一 个 被 打开 的 socket ( 套 接 字 )， 并 且 与 
| 服务 器 建立 连接 ， 服 务 器 就 可 以 把 数据 推送 到 这 个 socket 上 ， 服 务 器 不 再 需要 轮 询 客户 端的 请 求 ， 从 


| 被 动 转 为 了 主动 。 


另外 ， 在 WebSockets API 中 ， 同 样 可 以 使 用 跨 域 通信 技术 。 在 使 用 跨 域 通信 技术 时 ， 应 该 确保 


客户 端 与 服务 器 端 是 互相 信任 的 ， 服 务 器 端 应 该 判断 将 它 的 服务 发 送 给 所 有 客户 端 , 还 是 只 发 送 给 某 


| 些 受信 任 的 客户 端 。 
15.5.2 使 用 WebSockets API 


| WebSocket 连接 服务 器 和 客户 端 ， 这 个 连接 是 一 个 实时 的 长 连接 ， 服 务 器 端 一 旦 与 客户 端 建立 了 
| 双向 连接 ， 就 可 以 将 数据 推送 到 Socket 中 ， 客 户 端 只 要 有 一 个 Socket 绑 定 的 地 址 和 端口 与 服务 器 建 
| 立 联系 ， 就 可 以 接收 推送 来 的 数据 。 

【操作 步 又】 

(1) 创建 连接 。 新 建 一 个 WebSocket 对 象 ， 代 码 如 下 。 


Var host = "ws: // echo.websocket.org/": 
Var socket = new WebSocket(host); 


多 注意 ; WebSocket0 构 造 函 于 参 煞 为 URL， 必 须 以 ws 或 wss (加密 通信 时 ) 字符 开头 ， 后 面 字符 
| 串 可 以 使 用 HTTP 地 址 ,该 地 址 没有 使 用 HTTP 协 议 写 法 ,因为 它 的 属性 为 WebSocket URL. 
| URL 必须 由 4 个 部 分 组 成 ， 分 别 是 通信 标记 (ws ) 、 主 机 名 称 (host) 、 端 口号 (port) 
和 WebSocket Server。 


| 在 实际 应 用 中 ，socket 服务 器 端 脚本 可 以 是 Python、Nodejs、Java 和 PHP。 本 例 使 用 http://www. 
| websocket.org/ 网 站 提供 的 socket 服务 端 ， 协 议 地 址 为 ws://echo.websocket.org/。 这 样 方便 初学 者 需要 
| 架设 服务 器 测试 环境 ， 以 及 编写 服务 器 脚本 。 

(2) 发 送 数据 。 当 WebSocket 对 象 与 服务 器 建立 连接 后 ， 使 用 如 下 代码 发 送 数据 。 


| socket.send(dataInfo): 
| 


”A 注意 : socket 为 新 创建 的 WebSocket 对 象 ，send() 方 法 中 的 datalnfo 参数 为 字符 类 型 ， 只 能 使 用 
文本 数据 或 者 将 JSON 对 象 转换 成 文本 内 容 的 数据 格式 。 


(3) 接收 数据 。 通 过 message 事件 接收 服务 器 传 过 来 的 数据 ， 代 码 如 下 。 


socket.onmessage = function(event) { 
/ 弹出 收 到 的 信息 


| 

| 

| 

| 其 中 ， 通 过 回调 函数 中 event 对 象 的 data 属性 来 获取 服务 器 端 发 送 的 数据 内 容 ， 该 内 容 可 以 是 一 

| 个 字符 串 或 者 JSON 对 象 。 

| (4) 显示 状态 。 通 过 WebSocket 对 象 的 readyState 属性 记录 连接 过 程 中 的 状态 值 。readyState 属 
| 性 是 一 个 连接 的 状态 标志 ,用 于 获取 WebSocket 对 象 在 连接 、 打 开 或 关闭 时 的 状态 。 该 状态 标志 共有 
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4 个 属性 值 ， 简 单 说 明 如 表 15.3 所 示 。 


表 15.3 readyState 属性 值 


属 性 值 属性 常量 说 明 
0 CONNECTING 连接 尚未 建立 
1 OPEN WebSocket 的 连接 已 经 建立 
最 CLOSING 连接 正在 关闭 
3 CLOSED 连接 已 经 关闭 或 不 可 用 


提示 : WebSocket 对 象 在 连接 过 程 中 ， 通 过 侦 测 readyState 状态 标志 的 变化 ， 可 以 获取 服务 器 端 
与 客户 端 连接 的 状态 ， 并 将 连接 状态 以 状态 码 形式 返回 给 客户 端 。 
(5) 通过 open 事件 监听 socket 的 打开 ， 用 法 如 下 所 示 。 


WebSocket.onopen = function(event) { | 
// 开始 通信 时 处 理 | 
| 


| 
(6) 通过 close 事件 监听 socket 的 关闭 ， 用 法 如 下 所 示 。 


WebSocket.onclose = function(event) { 
// 通信 结束 时 的 处 理 


} 
(7) 调用 close0 方 法 可 以 关闭 socket， 切 断 通信 连接 ， 用 法 如 下 所 示 。 | 
webSocket.closeO; | 
| 
本 示例 完整 代码 如 下 。 | 
<html> | 
<head> | 
<script> | 
Var socket / 声明 socket | 
function initO { // 初始 化 | 
Var host = "ws: // echo.websocket.org/": // 声明 host， 注 意 是 ws 协议 | 
ty{ | 
socket =new WebSocket(host): // 新 建 一 个 socket 对 象 | 
log( 当 前 状态 : '+socketreadyState): 。“”// 将 连接 的 状态 信息 显示 在 控制 台 | 
socket.onopen = function(msg) {log(" 打 开 连 接 : "+ this.readyState):}:// 监听 连接 | 
socket.onmessage = function(msg) {log(" 接 收 消息 : "+ msg.data):}: | 
/ 监听 当 接收 信息 时 触发 匿名 函数 | 
socket.onclose = function(msg) flog(" 断 开 接连 : "+ this.readyState):}:// 关闭 连接 | 
socket.onerror = function(msg) {log(" 错 误 信 息 : "+ msg.data);}:// 监听 错误 信息 | 
} | 
catch (ex) { | 
log (ex): | 
} | 
$("msg").focusO: | 
ji | 
fonction sendO { / 发 送信 息 | 
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Var xbmsg: 
| txt= $("mse"); 
| msg = txt.value; 
| ne crt( 文本 框 不 能 够 为 空 让 Teturn;} 
> fxt: ee 
try {socket.send(msg); log(' 发 送 消息 : '+msg):} catch (ex) {log(ex);} 


| fonction quitO { // 关闭 socket 
log(" 再 见 "); 

socket.closeO: 

socket=null; 


} 

/ 根据 这 获取 DOM 元 素 

function $(id) {retum document.getElementById(id):} 

// 将 信息 显示 在 这 为 info 的 div 中 

function log(msg) {$("info").innerHTML += "<br>" + msg:} 
// 键盘 事件 〈 回 车 ) 

fnnction onkey(event) {iflevent.keyCode 一 13) {sendO;}} 
</script> 

</head> 

<body onload="initO"> 

| <div>HTMLS Websocket</div> 

| <div id="info"></div> 

| <input id="msg" type="textbox" onkeypress="onkey(event)"/> 
| <button onclick="send0"> 发 送 </button> 

| <button onclick="quitO"> 断 开 </button> 

| </body> 
| 

| 

| 


</html> 
在 浏览 器 中 预览 ， 演 示 效 果 如 图 15.2 所 示 。 


(a) 建立 连接 (b) 相互 通信 (c) 断 开 连接 
图 15.2 使 用 WebSocket 进行 通信 


在 WebSockets API 内 部 ， 通 过 使 用 WebSocket 协议 来 实现 多 个 客户 端 与 服务 器 端 之 间 的 双向 通 
| 信 。 该 协议 定义 客户 端 与 服务 器 端 如 何 通过 握手 来 建立 通信 管道 ， 实现 数据 (包括 原始 二 进 制 数 据 》 


1 际 上 标准 的 WebSocket 协议 为 REC6455 协议 《通过 IETF 批准 )， 目 前 为 止 ，Chrome 15+、 
| Fiefox 11+， 以 及 班 10 版 本 的 浏览 器 均 支持 该 协议 ， 包 括 该 协议 中 定义 的 二 进 抽 数据 的 传送 。 


| 安 提示 : WebSockets API 适用 于 当 多 个 客户 端 与 同一 个 服务 器 端 需要 实现 实时 通信 的 场合 。 例如， 
J 在 如 下 所 示 的 Web 网 站 或 Web 应 用 程序 中 。 
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多 人 在 线 游戏 网 站 。 

聊天 室 。 

实时 体育 或 新 闻 评论 网 站 。 
实时 交互 用 户 信息 的 社交 网 站 。 


加 罗网 加 


15.5.3 在 PHP 中 建立 socket 


15.5.2 节 介绍 了 如 何在 前 端 页 面 中 开启 WebSocket 服务 ， 下 面 以 PHP 技术 为 基础 ， 介 绍 如 何在 服 


务 器 端 开 启 WebSocket 服务 。 只 有 这 样 ， 才 能 够 实现 client (客户 端 ) 与 server (服务 器 端 ) 握手 通信 。 


PHP 实现 WebSocket 服务 主要 是 应 用 PHP 的 socket 函数 库 。PHP 的 socket 函数 库 与 C 的 socket 


函数 非常 类 似 ， 有 具体 说 明 可 以 参考 PHP 参考 手册 。 


(1) 在 服务 器 中 先 要 对 已 经 连接 的 socket 进行 存储 和 识别 。 每 一 个 socket 代表 一 个 用 户 ， 如 何 


关联 和 查询 用 户 信息 与 socket 的 对 应 就 是 一 个 问题 ， 这 里 主要 应 用 了 文件 描述 符 。 


(2) PHP 创建 的 socket 类 似 于 资源 类 型 ， 可 以 使 用 (int) 或 intval0 函 数 把 socket 转换 为 一 个 


唯一 的 ID 值 ， 从 而 可 以 实现 用 一 个 类 索引 数组 来 存储 socket 资源 和 对 应 的 用 户 信息 。 


$connected_sockets = array( 
(int)$socket => array( 
‘Tesource' => $socket, 
mame' => $name, 
‘ip' => $ip, 
‘port => Sport 


) 
) 


(3) 创建 服务 器 端 socket 的 代码 如 下 。 


// 创建 一 个 TCP socket: 此 函数 的 可 选 值 在 PHP 参考 手册 中 有 详细 说 明 ， 这 里 不 再 展开 
Sthis->master = socket_create(AF_INET SOCK_STREAM. SOL_TCP): 

/ 配置 参数 : 设置 他 和 端口 重用 ， 在 重启 服务 器 后 能 重新 使 用 此 端口 

Socket set option($this->master SOL SOCKET SO REUSEADDR. 1): 

/ 绑 定 通道 : 将 全 和 端口 绑 定 在 服务 器 socket 上 

socket_bind($this->master, $host, $port): 

// 监听 通道 :listen 函数 使 主动 连接 套 接口 变 为 被 连接 套 接口 ， 使 得 此 socket 能 被 其 他 
/ socket 访问 ， 从 而 实现 服务 器 功能 。 后 面 的 参数 则 是 自 定义 的 待 处 理 socket 的 最 大 数目 ， 
/ 并 发 高 的 情况 下 ， 这 个 值 可 以 设置 大 一 点 ， 虽 然 它 也 受 系统 环境 的 约束 。 

Socket listen($this->master, self: : LISTEN_SOCKET NUM): 


这 样 就 得 到 一 个 服务 器 socket， 当 有 客户 端 连 接 到 此 socket 上 时 ， 它 将 改变 状态 为 可 读 。 
(4) 完成 通道 连接 之 后 ， 下 面 是 服务 器 的 处 理 迪 辑 。 
这 里 着 重 讲解 一 下 socket_select0 函 数 的 用 法 。 
int socket_select(array &S$read. array &$ write. array &$except., int Stv_sec[. int $tv_ usec=0]) 
socket_select0 函 数 使 用 传统 的 select 模型 ,可 读 、 可 写 、 异 常 的 socket 会 被 分 别 放 入 $read、$write、 


Sexcept 数组 中 ， 然 后 返回 状态 改变 的 socket 的 数目 ， 如 果 发 生 了 错误 ， 函 数 将 会 返回 false。 
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不 % 

4 注意 : 最 后 两 个 时 间 参 数 只 有 单位 不 同 ， 可 以 搭配 使 用 ， 用 来 表示 socket_select 阻塞 的 时 长 。 为 
0 时 此 函数 立即 返回 ， 可 以 用 于 轮 询 机 制 ; 为 null 时 ， 函 数 会 一 直 阻塞 下 去 ， 这 里 可 设置 
$tv_sec 参数 为 null， 让 它 一 直 阻 塞 ， 直 到 有 可 操作 的 socket 返回 。 


到] ”下 i 是 服务 器 的 主要 地 辑 . 
S$write = $except =NULL: 
| $sockets = array_column($this->sockets, resource'); // 获取 到 全 部 的 socket 资源 
| Sread_ num = socket select($sockets, $write, Sexcept NULL): 
foreach ($sockets as $socket) { 


// 如 果 可 读 的 是 服务 器 socket， 则 处 理 连接 逻辑 
让 ($socket 一 $this->master) { 
socket_accept($this->master); 
// socket_acceptO 接 受 请 求 的 连接 ， 即 一 个 客户 端 socket， 错 误 时 返回 false 
Self : connect($client): 
continue; 
// 如 果 可 读 的 是 其 他 已 连接 socket， 则 读 取 其 数据 ， 并 处 理应 答 逻 辑 
}else{ 
// 函数 socket TecvO 从 socket 中 接受 长 度 为 len 字 节 的 数据 ， 并 保存 在 Sbuffer 中 
$bytes = @socket recv($socket, Sbuffer 2048. 0): 
if ($bytes <9) { 
// 当 客 户 端 忽然 中 断 时 ， 服 务 器 会 接收 到 一 个 8 字 节 长 度 的 消息 ， 
| / 《由 于 其 数据 帧 机 制 ，8 字 节 的 消息 表示 它 是 客户 端 异 常 中 断 消息 )， 
| // 服务 器 处 理 下 线 逻 辑 ， 并 将 其 封装 为 消息 广播 出 去 
| Srecv_msg = $this->disconnect($socket): 


} 
else { 
| // 如 果 此 客户 端 还 未 握手 ， 执 行 握手 逻辑 
| if (!$this->sockets[(int)$socket]['handshake’]) { 
| self: : handShake($socket, $buffer); 
continue: 
} 
else { 
Srecv_msg = Self : parse($buffer); 
] 
} 
/ 广播 消息 
Sthis->broadcast($mse): 


| 上 面 代码 只 是 服务 器 处 理 消息 的 基础 代码 , 日 志 记录 和 异常 处 理 都 略 过 了 , 而且 还 有 些 数 据 帧 解 
| 析 和 封装 的 方法 ， 在 此 不 再 展开 。 


15.5.4 ”WebSockets API 开发 框架 


| 

| WebSockets API 的 使 用 为 Web 应 用 程序 的 搭建 提供 了 一 种 新 的 架构 。 自 HTMLS5 开始 ， 在 一 个 
| Web 应 用 程序 中 ， 当 服务 器 端 不 会 同时 处 理 过 多 来 自 客户 端的 请 求 时 ， 仍 然 可 以 使 用 传统 的 Web 应 
| 用 程序 架构 。 例如, LAMP (Linux 操作 系统 +Apache 服务 器 +MySQL 数据 库 +PHP 或 Perl 或 Python) 
| 架构 。 


.424 . 


第 15 章 JavaScript 通信 $9 


当 服务 器 端 需要 同时 处 理 大 量 来 自 客户 端的 请 求 ， 并且 需 要 确保 服务 器 端 只 需 花费 较 少 的 性 能 成 | | 
本 来 处 理 这 些 请 求 时 ， 可 以 使 用 这 种 新 型 的 WebSockets API 的 应 用 程序 架构 ， 因 为 这 种 应 用 程序 架 | | 
构 通常 使 用 “ 非 阻塞 型 IO0” 技 术 。 | 
目前 为 止 ， 能 够 实现 这 种 新 型 的 WebSockets API 的 应 用 程序 架构 的 开发 框架 包括 如 下 。 | 


SocketIO。 
WebSocket-Node。 


宣 
沽 
过 
8 
5 
沁 
省 
部 
| : 


ws。 | 

使 用 Java 开发 语言 
Jetty。 | 

使 用 Ruby 开发 语言 
EventMachine。 

使 用 Python 开发 语言 
Pywebsocket。 
Tornado 。 

使 用 Erlang 开发 语言 
Shirasu。 

使 用 C++ 开发 语言 
.Libwebsockets。 

7. 使 用 .NET 开发 语言 

Superwebsocket 。 


15.5.5 案例 : 设计 简单 的 “ 呼 -应 ”通信 


本 例 通 过 一 个 简单 的 示例 演示 如 何 使 用 WebSockets 让 客户 端 与 服务 器 
端 握手 连接 ， 然 后 进行 简单 的 呼叫 和 应 答 通信 。 
具体 操作 步骤 和 示例 代码 请 扫 码 阅读 。 


15.5.6 案例: 发送 JSON 对 象 


15.5.5 节 示 例 介绍 了 如 何 使 用 WebSockets API 发 送 文本 数据 ， 本 节 示 例 将 演 
示 如 何 使 用 JSON 对 象 来 发 送 一 切 JavaScript 中 的 对 象 。 使 用 JSON 对 象 的 关键 是 
使 用 它 的 两 个 方法 : JSON parse0 和 JSONL.stringify0， 其 中 JSON.stringify0 方 法 可 
以 把 JavaScript 对 象 转换 成 文本 数据 ，JSON.parse0 方 法 可 以 将 文本 数据 转换 为 
JavaScript 对 象 。 

本 节 示 例 操作 步骤 和 代码 请 扫 码 阅读 。 


人 人 


国民 关 图 名 用 


久 用 


因 多 
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15.5.7 案例 : 使 用 Workerman 框架 通信 


上 二 | 直接 使 用 PHP 编写 WebSockets 应 用 服务 ， 比 较 烦 珊 ， 对 于 初学 者 来 说 是 一 个 挑战 。 本 节 介 绍 如 
1 | 何 使 用 Workerman 框架 简化 WebSockets 应 用 开发 。 


1 注意 : 类 似 Workerman 的 框架 比较 多 ， 如 Nodejs、Netty、Undertow、Jetty、Spray-websocket、 
Vertx、Grizzly 等 ， 本 节 介 绍 的 Workerman 框架 比较 简单 、 实 用 。 


Workerman 是 一 个 高 性 能 的 PHP socket 服务 器 框架 ， 其 目标 是 让 PHP 开发 者 更 
容易 开发 出 基于 socket 的 高 性 能 的 应 用 服务 ， 而 不 用 去 了 解 PHP socket 以 及 PHP 多 
进程 细节 。 

本 节 示 例 代码 请 扫 码 阅读 。 


15.5.8 ”案例 :推送 信息 


本 节 示 例 模拟 微 信 推送 功能 , 为 特定 会 员 主动 推送 优惠 广告 信息 。 在 浏览 器 中 运 
行 push.php, 向 客户 端 uid 为 2 的 会 员 推 送信 息 , 则 可 以 看 到 clientl.html、client2.html 
显示 通知 信息 ， 而 client3.html 没有 收 到 通知 。 

具体 操作 步骤 和 演示 效果 请 扫 码 学 习 。 
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JavaScript 数据 存储 


在 HIML 4 中 ， 客 户 端 处 理 网 页 数据 的 方式 主要 通过 cookie 来 实现 ， 但 cookie 存在 很 
多 缺陷 ， 如 不 安全 、 容 量 有 限 等 。HTMLS 新 增 Web Database API， 用 来 替代 cookie 解决 方 
案 ， 对 于 简单 的 key/value ( 键 值 对 ) 信息 ， 使 用 Web Storage 存储 会 非常 方便 。 另 外 ， 部 分 
现代 浏览 器 还 支持 不 同类 型 的 本 地 数据 库 , 使 用 客户 端 数据 库 可 以 减轻 服务 器 端的 压力 ， 提 


升 Web 应 用 的 访问 速度 


【 学习 重 点 】 

WI 使 用 Web Storage。 

MI 使 用 Web SQL 数据 库 
WI 使 用 indexedDB 数据 库 ， 


ei 网 页 编程 从 入 门 到 精通 ( 微 课 精 编 版 ) 


16.1 HTTP Cookie 


cookie 是 服务 器 保存 在 浏览 器 的 一 小 段 文本 信息 , 每 个 cookie 的 大 小 一 般 不 能 
超过 4kb。 浏 览 器 每 次 向 服务 器 发 出 请 求 ， 就 会 自动 附 上 这 段 信息 。 


本 有 关 cookie 的 作用 、 优 点 和 人 缺点， 请 扫 码 了 解 。 


16.1.1 写 入 cookie 信息 


使 用 document.cookie 可 以 读 写 cookie 字符 串 信息 。 
cookie 字符 串 是 一 组 名 值 对 ， 名 称 和 值 之 间 以 等 号 相连 ， 名 值 对 之 间 使 用 分 号 进行 分 隔 。 值 中 不 
能 够 包含 分 号 .逗号 和 空白 符 。 如 果 包 含 特殊 字符 , 必须 使 用 escape0 函 数 对 其 进行 编码 , 在 读 取 cookie 
时 也 必须 使 用 unscape0 函 数 进行 解码 。 
【示例 1】 下 面 示例 演示 如 何 使 用 cookie 存储 cookie 信息 。 


var d= new Date0: 

d= dtoString0: 

d= "date=" + escape(d): // 设置 cookie 字符 串 
document.cookie = d: // 写 入 cookie 信息 


在 默认 状态 下 , cookie 信息 只 能 在 当前 会 话 期 (当前 浏览 窗口 ) 中 有 效 并 存在 , 一 旦 结束 会 话 ( 关 
闭 浏览 窗口 )， 这 些 cookie 信息 就 会 被 自动 删除 。 
如 果 长 久保 存 cookie 信息 ， 可 以 设置 expires 属性 ， 把 字符 串 "expires=date" 附 加 到 cookie 字符 串 


| 后 面 ， 用 法 如 下 。 


name = value: expires = date 
date 为 格林 威 治 日 期 时 间 (GMT) 格式 : Sun, 30 Apr 2017 00:00:00 UTC。 
容 提示 : 使 用 Date toGMTString( 方 法 可 以 快速 把 时 间 对 象 转换 为 GMT 格式 。 


【示例 2】 下 面 示例 将 创建 一 个 有 效 期 为 一 个 月 的 cookie 信息 。 


var d = new Date0: / 实例 化 当前 日 期 对 象 

dsetMonth(d.getMonthO + 1): / 提取 月 份 值 并 加 1， 然 后 重新 设置 当前 日 期 对 象 

d="date=" + escape(d) + ":expires=" + dtoGMTString0): 

/ 在 cookie 字符 串 的 尾部 添加 expires 名 值 对 

document.cookie = d: // 写 入 cookie 信息 

cookie 信息 是 有 域 和 路 径 限制 的 。 在 默认 情况 下 ， 仅 在 当前 页 面 路 径 内 有 效 。 例 如 ， 在 下 面 页 面 
中 写 入 了 cookie 信息 。 

http:// www.mysite.cn/bbs/index.html 

这 个 cookie 只 会 在 http://www.mysite.cn/bbs/ 路 径 下 可 见 , 其 他 域 或 本 域 其 他 目录 中 的 文件 是 无 权 
访问 的 。 这 种 限制 主要 是 为 了 保护 cookie 信息 安全 ， 避 免 恶意 读 写 。 

用 户 可 以 使 用 cookie 的 path 和 domain 属性 重 设 可 见 路 径 和 作用 域 . 其 中 path 属性 包含 了 与 cookie 
信息 相关 联 的 有 效 路 径 ，domain 属性 定义 了 cookie 信息 的 有 效 作用 域 ， 用 法 如 下 。 
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name = value; expires = date; domain = domain: path = path; 


容 提示 : 如 果 设置 path=/， 可 以 设置 cookie 信息 与 服务 器 根 目录 及 其 子 目 录 相 关联 ， 从 而 实现 在 整 
个 网 站 中 共享 cookie 信息 ; 如 果 只 想 让 bbs 目录 下 的 网 页 访问 , 可 以 设置 path=/bbs 即 可 。 


很 多 网 站 可 能 包含 很 多 域名 ， 例 如 ， 百 度 网 站 包含 的 域名 就 有 很 多 个 ， 简 单列 表 如 下 。 

http:// www.baidu.com/ 

http:// news.baidu.com/ 

http:// tieba.baidu.com/ 

http:// zhidao.baidu.com/ | 

hittp:// mp3.baidu comy | 
| 


在 默认 情况 下 ，cookie 信息 只 能 在 本 域 中 访问 ， 通 过 设置 cookie 的 domain 属性 修改 域 的 范围 。 
例如 ,在 http:// www.baidu.com/index.html 文 件 中 设置 cookie 的 domain 属性 为 domain= tieba.baidu.com， 
就 可 以 在 http:// tieba.baidu.com/ 域 下 访问 该 cookie。 如 果 人 允许 所 有 子 域 都 能 访问 cookie 信息 ， 设 置 
domain= baidu.com 即 可 ， 这 样 该 cookie 信息 就 与 baidu.com 的 所 有 子 域 下 的 所 有 页 面相 关联 ， 包 括 
www、news、tieba、zhidao、mp3 等 子 域 区 域 。 

cookie 使 用 secure 属性 定义 cookie 信息 的 安全 性 。secure 属性 取 值 包括 secure 或 者 空 字符 串 。 在 
默认 情况 下 ，secure 属性 值 为 空 ， 即 cookie 信息 使 用 不 安全 的 HTTP 连接 传递 数据 。 如 果 一 个 cookie 
设置 了 secure， 那么 cookie 信息 在 客户 端 与 Web 服务 器 之 间 进 行 传递 时 ， 就 通过 HTTPS 或 者 其 他 安 
全 协议 传递 数据 。 

综 上 所 述 ， 比 较 完善 的 cookie 信息 字符 串 应 该 包括 下 面 几 个 部 分 。 

cookie 信息 字符 串 ， 包 含 一 个 名 / 值 对 ， 默 认为 空 。 
cookie 有 效 期 ， 包 含 一 个 GMT 格式 的 字符 串 ， 默 认为 当前 会 话 期 ， 即 如 果 没 有 设置 ， 则 当 
关闭 浏览 器 时 ，cookie 信息 就 因 过 期 而 被 清除 。 
cookie 有 效 路 径 ， 默 认为 cookie 所 在 页 面目 录 及 其 子 目录 。 
cookie 有 效 域 ， 默 认为 设置 cookie 的 页 面 所 在 的 域 。 
cookie 安全 性 ， 默 认为 不 采用 安全 加 密 措施 进行 传递 。 
示例 3】 下面 示例 把 写 入 cookie 信息 的 实现 代码 进行 封装 。 
/1/ 写 入 cookie 信息 
// 参数 ，name 表示 cookie 名 称 ，value 表示 cookie 值 ，expires 表示 有 效 天 数 ，path 表示 有 效 路 径 
// domain 表示 域 ，secure 表示 安全 性 设置 。 其 中 name、value、path 和 domain 参数 为 字符 串 类 型 
2 td 而 参数 expires 为 数值 ，secure 表示 布尔 值 ， 表 示 是 否 加 密 传输 cookie 信息 
了 
function setCookie(name. value. expires. path. domain. secure) { 


四 加 


mm 图 加 加 


Var today = new Date(): / 获取 当前 时 间 对 象 | 
todaysetTime(today getTimeO): / 设置 现在 时 间 | 
if (expires) { / 如 果 有 效 期 参数 存在 ， 则 转换 为 毫秒 数 | 
expires = expires * 1000 * 60 * 60 * 24: | 
} | 
var expires_date = new Date(today.getTime() + (expires)); // 新 建 有 效 期 时 间 对 象 | 
document.cookie = name + "=" + escape(value) // 写 入 cookie 信息 | 
+((expires) ? "expires=" + expires_date.toGMTString0 : ") “”// 指定 有 效 期 | 
+ ((path) ? ":path=" + path : "") // 指定 有 效 路 径 | 
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二 
| 名 
KK% 
+ ((domain) ? ":domain=" + domain : "") // 指定 有 效 域 
+ ((secure) ? ":secure" : ""): / 指定 是 否 加 密 传 输 


到 ,| 16.1.2 读 取 cookie 信息 
访问 document.cookie 可 以 读 取 cookie 信息 ，cookie 属性 值 是 一 个 由 零 个 或 多 个 名 值 对 的 子 字符 
串 组 成 的 字符 串 列表 ， 每 个 名 值 对 之 间 通 过 分 号 进行 分 隔 。 
【示例 1】 可 以 采用 下 面 的 方法 把 cookie 字符 串 转换 为 对 象 类 型 。 
/ 把 cookie 字符 串 转换 为 对 象 类 型 


| / 参数 : 无 
| / 返回 值 : 对象， 存储 cookie 信息 ， 其 中 名 称 作为 对 象 的 属性 而 存在 ， 而 值 作为 属性 值 而 存在 
fnction getCookie0 { 
| Var a = document.cookie.split(":"); / 把 cookie 字符 串 劈 开 为 数组 
| var 0={}:; / 临时 对 象 直接 量 
| for (vari=0:i < alength:itt) { // 遍历 数组 
| var v = ali].split("="); // 劈 开 每 个 数组 元 素 
| ofv[o] =v[1]: / 把 元 素 的 名 和 值 转换 为 对 象 的 属性 和 属性 值 
} 
retum 0:; // 返回 对 象 


| 如 果 在 写 入 cookie 信息 时 ， 使 用 了 escape0 方 法 编码 cookie 值 ， 则 应 该 在 读 取 时 不 要 忘记 使 用 
| unescape( 方 法 解码 cookie 值 。 
下 面 使 用 getCookie 函数 读 取 cookie 信息 ， 并 查看 每 个 名 / 值 对 信息 。 


【示例 2】 在 实际 开发 中 ， 更 多 的 操作 是 直接 读 取 某 个 cookie 值 ， 而 不 是 读 取 所 有 cookie 信息 。 
下 面 示例 定义 一 个 比较 实用 的 函数 ， 用 来 读 取 指定 名 称 的 cookie 值 。 
// 读 取 指定 cookie 信息 
// 参数 ，cookie 名 称 


/ 返回 值 : cookie 值 

| function getCookie(name) { 
| var start = document.cookie.indexOftname + "="): // 提取 与 cookie 名 相同 的 字符 串 索引 
| var len = start + name.length + 1: // 计算 值 的 索引 位 置 

if((! start) && (name != document.cookie.substring(0. name.length))) {// 没有 返回 null 

Tetum null: 
b 
if (start 一 -1) retum null: // 如 果 没有 找到 ， 则 返回 null 


| 

| 

| Var end = document.cookie.indexOft":". len): / 获取 值 后 面 的 分 号 索引 位 置 

| 六 (end 一 -1) end = document.cookie.length: // 如 果 为 -1， 设 置 为 cookie 字符 串 的 长 度 
Tetum unescape(document.cookie.substring(len. end)): // 获取 截取 值 ， 并 解码 返回 
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16.1.3 ”修改 和 删除 cookie 信息 
如 果 要 改变 指定 cookie 的 值 ， 只 需要 使 用 相同 名 称 和 新 值 重新 设置 该 cookie 值 即 可 。 如 果 要 删 


| 视频 讲解 
除 某 个 cookie 信息 ， 只 需要 为 该 cookie 设置 一 个 已 过 期 的 expires 属性 值 。 | 会 内 
【示例 】 下 面 示例 封装 了 如 何 删除 指定 cookie 信息 的 方法 , 这 个 方法 需要 调用 getCookie0 函 数 。 | 一 一 
/ 删除 指定 cookie 信息 te 
// 参数 : name 表示 cookie 名 称 ，path 表示 所 在 路 径 ，domain 表示 所 在 域 
/ 返回 值 : 无 


function deleteCookie(name, path, domain) { 
if (getCookie(name)) document.cookie = name + "=" // 如 果 名 称 存在 ， 则 清空 
+ ((path) ? ":path=" + path : "") / 如 果 存 在 路 径 ， 则 加 上 
+((domain) ? ":domain=" + domain : ") / 如 果 存 在 域 ， 则 加 上 
+ ";expires=Thu, 01-Jan-1970 00:00:01 GMT": 
/ 设置 有 效 期 为 过 去 时 ， 即 表示 该 cookie 无 效 ， 将 会 被 浏览 器 清除 | 
} | 


16.1.4 ”附加 cookie 信息 


浏览 器 对 cookie 信息 都 有 个 数 限制 ， 为 了 避免 超出 这 个 限制 ， 可 以 把 多 条 信息 都 保存 在 一 个 
cookie 中 , 而 不 是 为 每 条 信息 都 新 建 一 个 cookie。 由 于 cookie 可 存储 的 字符 串 最 大 长 度 为 4K( 即 4096 
个 字符 )， 在 实际 应 用 中 ， 这 个 字符 串 长 度 完 全 满足 各 种 用 户 信息 的 存储 。 

实现 方法 : 在 每 个 名 值 对 中 ， 再 嵌 套 一 组 子 名 / 值 对 。 子 名 / 值 对 的 形式 可 以 自由 约定 ， 并 确保 不 | 
引发 歧义 即 可 。 例 如 ， 使 用 冒号 作为 子 名 和 子 值 之 间 的 分 隔 符 ， 而 使 用 逗号 作为 子 名 / 值 对 之 间 的 分 | 
隔 符 ， 约 定 类 似 于 对 象 直接 量 。 

subNamel: subValuel, subName2: subValue2, subName3: subValue3 

然后 把 这 组 子 名 / 值 串 作为 值 传递 给 cookie 的 名 称 。 

name = subNamel: subValuel, subName2: subValue2, subName3: subValue3 


为 了 确保 子 名 / 值 串 不 引发 歧义 ， 建议 使 用 escape0 方 法 对 其 进行 编码 ， 读 取 时 再 使 用 unescapeO 

方法 转 码 即 可 。 
【示例 1】 下 面 示例 演示 了 如 何在 cookie 中 存储 更 多 的 信息 。 

/ 定义 有 效 期 

var d= new Date():; 

d.setMonth(d.getMonthO + 1): 

d= dtoGMTString0: 

// 定义 cookie 字符 串 

var a = "name: a, age: 20. addr: beijing" // 子 名 / 值 串 


var c= "User—=" + escape(a) // 组 合 cookie 字符 串 
C4 m+"expires" 十 中 1/ 设置 有 效 期 为 1 个 月 
document.cookie = c: // 写 入 cookie 信息 


【示例 2】 当 读 取 cookie 信息 时 ， 首 先 需要 获取 cookie 值 ， 然 后 调用 unescape0 方 法 对 cookie 值 | 
进行 解码 ， 最 后 再 访问 cookie 值 中 每 个 子 cookie 值 。 因 此 对 于 document.cookie 来 说 ， 就 需要 分 解 | 
3 次 才能 得 到 精确 的 信息 。 | 
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| (A 
KE% 
// 读 取 所 有 cookie 信息 ， 包 括 子 cookie 信息 
/ 参数 : 无 
/ 返回 值 : 存储 子 cookie 信息 ， 其 中 名 称 作为 对 象 的 属性 而 存在 ， 而 值 作为 属性 值 存在 
function getSubCookieO { 
Var a = document.cookie.split(": 
Var 0={}; 
| for (vari= 0; i< alength: i++) { // 遍历 cookie 信息 数组 
| ali] && (ali] = ali].replace(/N\s+hs+$/, ™)): 
| / 清除 头 部 空格 符 
| var b = ali].split("="); 
| var c=b[1]: 
| CR&& (c=creplace(/N\sths+$/, "")): / 清除 头 部 空格 符 
| c= unescape(©): // 解码 cookie 值 
| if(! Ngitest(o)) { // 如 果 不 包含 子 cookie 信息 ， 则 直接 写 入 返回 对 象 
| ofb[0]] = b[1]: 
| } 
| else { 
| var d=c.split(", // 劈 开 cookie 值 
| for(varj=0:j<dlength: j++) { ”// 遍历 子 cookie 数组 
| var © = d[j].split(":"); // 劈 开 子 cookie 名 / 值 对 
| ofe[0]] = ef1]: // 把 子 cookie 信息 写 入 返回 对 象 
} 
} 
| } 
retum o: // 返回 包含 cookie 信息 的 对 象 


| 

| I 提示 : 现代 浏览 器 都 支持 cookie, 但 是 也 难免 会 出 现 意外 . 例如 ,个 别 老式 浏览 器 不 支持 cookie， 
或 者 用 户 禁 止 浏览 器 使 用 cookie。 为 了 安全 起 见 ， 在 使 用 cookie 之 前 ， 应 该 探测 客户 端 是 
否 启用 cookie， 如 果 没有 启用 、 则 可 以 采取 应 急 措 施 ， 介 免 不 必要 的 损失 . 

一 般 可 以 使 用 下 面 的 方法 来 探测 客户 端 浏览 器 是 否 支持 cookie。 


if (navigator.CookieEnabled) { 
// 如 果 存 在 CookieEnabled 属性 ， 则 说 明 浏览 器 支持 cookie， 就 可 以 安全 写 入 或 读 取 cookie 信息 
SetCookieO: 
| / 或 
| getCookie(): 
| 


如 果 浏 览 器 启用 了 cookie, 则 CookieEnabled 属性 值 为 tue; 当 禁 用 了 cookie 时 , 则 该 属性 值 为 false。 


16. 1.5 Http-Only Cookie 


设置 cookie 时 ， 如 果 服 务 器 加 上 了 HttpOnly 属性 ， 则 这 个 cookie 无 法 被 JavaScript 读 取 〈 即 
| document.cookie 不 会 返回 这 个 cookie 的 值 )， 只 用 于 向 服务 嚣 发送， 设置 方法 如 下 。 


| Set-Cookie: key=value; HttpOnly 
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上 面 代码 中 的 cookie 将 无 法 用 JavaScript 获取 。 进 行 Ajax 操作 时 ，XMLHttpRequest 对 象 也 无 | 
法 包括 该 cookie。 这 主要 是 为 了 防止 XSS 攻击 盗 取 Cookie。 | 


涯 提示 : 浏览 器 的 同 源 政策 规定 ， 两 个 网 址 只 要 域名 相同 和 端口 相同 ， 就 可 以 共享 cookie， 注 意 ，| 
这 里 不 要 求 协议 相同 ,例如 , http:// example.com 设置 的 cookie, 可 以 被 https:// example.com | 
读 取 。 | 


16.1.6 ”封装 cookie 操作 


cookie 操作 比较 简单 ,但 是 在 默认 状态 下 存 取 cookie 信息 还 是 比较 麻烦 的 。 本 节 定 义 函数 cookie0， 

来 封装 cookie 的 所 有 操作 。 | 
cookie0 函 数 即 可 以 写 入 指定 的 cookie 信息 ， 删 除 指定 的 cookie 信息 ， 同 时 也 能 够 读 取 指 定名 称 | 

的 cookie 值 ， 另 外 还 可 以 指定 cookie 信息 的 有 效 期 、 有 效 路 径 、 作 用 域 和 安全 性 选项 设置 。 | 
如 果 在 调用 cookie0 函 数 时 ， 仅 指定 一 个 参数 值 ， 则 表示 读 取 指定 名 称 的 cookie 值 ， 如 果 指定 两 | 

个 参数 ， 则 表示 写 入 cookie 信息， 其 中 第 一 个 参数 表示 名 称 ， 第 二 个 参数 表示 值 。 在 第 三 个 参数 中 | 

还 可 以 传递 选项 信息 ， 这 些 信息 以 字典 形式 存储 在 对 象 中 进行 传递 。 前 两 个 参数 以 字 。” 回 Rs | 

符 串 形式 进行 传递 。 
限于 篇 幅 ， 封 装 代码 请 参考 本 节 示例 源 代码 ， 或 者 请 扫 码 阅读 。 
应 用 示例 : 写 入 cookie 信息 。 


小 
Fs 
吾 
党 


cookie("user", "css8"); // 简单 写 入 一 条 cookie 信息 | 
cookie("user", "css8", { // 写 入 一 条 cookie 信息 ， 并 设置 更 多 选项 | 
expires: 10, // 有 效 期 为 10 天 | 
path: "/", // 整个 站 点 有 效 | 
domain: "www.mysite.cn"， /人 有 效 域名 | 
secure: true // 加 密 数 据 传输 | 
D: | 
读 取 cookie 信息 。 | 
cookie("user") | 
删除 cookie 信息 。 | 
cookie("user",null): 


16.1.7 ”案例 实战 


本 节 示 例 演示 了 如 何 使 用 cookie 设计 一 个 打字 游戏 ， 页 面包 含 3 个 控制 按钮 和 一 个 文本 区 域 。 
当 单 击 “ 开 始 测试 打字 速度 ”按钮 时 ，JavaScript 首先 判断 用 户 的 身份 ， 如 果 发 现 用 户 没 有 注册 ， 则 
会 及 时 提示 注册 ， 然 后 开始 计时 。 当 单 击 “ 停 止 测试 ”按钮 时 ， 则 JavaSecript 能 够 及 时 计算 打字 的 
字数 、 花 费 的 时 间 〈 以 分 计 )。 测 算 打 字 速 度 ， 并 与 历史 最 好 成 绩 进 行 比 较 ， 同 时 加 ;gw 
累计 用 户 打 字 的 总 字数 。 

详细 示例 说 明 、 代 码 和 演示 效果 请 扫 码 阅读 。 
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16.2 Web Storage 


全 - | HTML5 的 Web Storage API 提供 了 两 种 客户 端 数据 存储 的 方法 : localStorage 和 sessionStorage。 


二 者 之 间 的 重要 区 别 如 下 ， 具 体 用 法 基本 相同 。 
| 回 localStorage; 用 于 持久 化 的 本 地 存储 ， 除 非 主 动 删除 ， 否 则 数据 永远 不 会 过 期 。 


| 回 sessionStorage: 用 于 存储 本 地 会 话 (session) 数据 ， 这 些 数据 只 有 在 同一 个 会 话 周 期 内 才能 
访问 ， 当 会 话 结束 后 数据 也 随 之 销毁 ， 如 关闭 网 页 ， 切 换 选 项 卡 视图 等 。 因 此 sessionStorage 
是 一 种 短期 本 地 存储 方式 。 

Web Storage 的 优势 如 下 。 

存储 空间 比 cookie 大 很 多 。 

存储 内 容 不 会 反馈 给 服务 器 ， 而 cookie 信息 会 随 着 请 求 一 并 发 送 给 服务 器 。 

Web Storage 提供 了 一 套 丰 富 的 接口 ， 使 得 数据 操作 更 为 简便 。 

| 独立 的 存储 空间 ， 每 个 域 (包括 子 域 ) 有 独立 的 存储 空间 ， 各 个 存储 空间 是 完全 独立 的 ， 因 

| 此 不 会 造成 数据 混乱 。 

| Web Storage 的 缺陷 如 下 。 

浏览 器 不 会 检查 脚本 所 在 的 域 与 当前 域 是 否 相同 。 例 如 ， 如 果 在 域 B 中 嵌入 域 A 的 脚本 文 
件 ， 那 么 域 A 的 脚本 文件 可 以 访问 域 B 中 的 数据 。 不 过 这 个 漏洞 很 容易 修补 。 

存储 数据 未 加 密 ， 且 永远 保存 ， 容 易 泄漏 。 

| 在 HTML5 众多 API 中 ，Web Storage 的 浏览 器 支持 是 非常 好 的 ， 目 前 主流 浏览 器 都 支持 Web 

| Storage， 如 了 8+、Firefox 3+、 Opera 10.5+、Chrome 3.0+ 和 Safari 4.0+。 


| 16.2.1 使 用 Web Storage 
localStorage 和 sessionStorage 对 象 拥有 相同 的 属性 和 方法 ， 操 作 方法 也 都 相同 。 


办 办 办 


1. 存储 

使 用 setttem0 方 法 可 以 存储 值 ， 用 法 如 下 。 

| setItem(key., value) 

| 参数 key 表示 键 名 ，value 表示 值 ， 都 以 字符 串 形式 进行 传递 。 例 如 : 
sessionStorage.setftem("key", "value"): 

| localStorage.setItem("site". "mysite.cn"): 

| 2. 访问 

| 使 用 getItem0 方 法 可 以 读 取 指定 键 名 的 值 ， 用 法 如 下 。 
getltem(key) 


| 参数 key 表示 键 名 ， 字 符 串 类 型 。 该 方法 将 获取 指定 key 本 地 存储 的 值 。 例 如 。 
| var value = sessionStorage.getftem("key"): 
| Var site = localStorage.getItem("site"): 


3. 删除 
使 用 removeItem0 方 法 可 以 删除 指定 键 名 本 地 存储 的 值 ， 用 法 如 下 。 
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sc 
removeltem(key) | 
参数 key 表示 键 名 ， 字 符 串 类 型 。 该 方法 将 删除 指定 key 本 地 存储 的 值 。 例 如 : | 
sessionStorage .removeltem("key"): | 
localStorage .removeltem("site"): 
4. 清空 
使 用 clear0 方 法 可 以 清空 所 有 本 地 存储 的 键 值 对 ， 用 法 如 下 。 | 
clear0 | 
例如 ， 直 接 调用 clear0 方 法 可 以 直接 清理 本 地 存储 的 数据 。 | 
sessionStorage.clear(): | 
localStorage.clear0: | 


深 提示 : Web Storage 也 支持 使 用 点 语法 ， 或 者 使 用 字符 事 数 组 [] 的 方式 来 处 理 本 地 数据 。 例 如 : 


| 
var storage = window.localStorage: // 获取 本 地 localStorage 对 象 | 
/ 存储 值 | 
storage.key = "hello": 
storage["key"] = "world": 
/ 访问 值 
console.log(storage.key): 
console.log(storage["key"]); 


5. 遍历 
Web Storage 定义 key0 方 法 和 length 属性 ， 使 用 它们 可 以 对 存储 数据 进行 遍历 操作 。 
【示例 1】 下 面 示例 获取 本 地 localStorage， 然 后 使 用 for 语句 访问 本 地 存储 的 所 有 数据 ， 并 输出 
到 调试 台 显示 。 
Var storage = window.localStorage; 
for (vari= 0.1len = storage.length: i < len: i++) { 
Var key = storage.key(i): 


var value = storage.getItem(key): 
console.log(key + "=" + value): 


; 


6. 监测 事件 
Web Storage 定义 storage 事件 ， 当 键 值 改变 或 者 调用 clear() 方 法 时 ， 将 触发 storage 事件 。 
【示例 2】 下 面 示例 使 用 storage 事件 监测 本 地 存储 ， 当 发 生 值 变 动 时 ， 即 时 进行 提示 。 
if (window.addEventListener) { 
window.addEventListener("storage".handle_storage.false): 
jelse if (window.attachEvent) { 
window.attachEvent("onstorage".handle_storage): 


} 
function handle_storage(e) { 
var logged = "key:" + ekey +". newValue:" + e.newValue + ". oldValue:" + e.oldValue + ". url:" + e.url 
+", storageArea:" + e.storageArea: 
alert(logged): 
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storage 事件 对 象 包含 属性 说 明 如 表 16.1 所 示 。 


| 
| 表 16.1 storage 事件 对 象 属性 
| 属性 说 有明 


又 key | String 
svahe .Aoy 


键 的 名 称 
以 前 的 值 被 覆盖 的 值 》， 如 果 是 新 添加 的 项 目 ， 则 为 null 
新 的 值 ， 如 果 是 新 添加 的 项 目 ， 则 为 null 

引发 更 改 的 方法 所 在 页 面 地 址 


newValue | 


urluni 


16.2.2 案例: 设计 登录 页 
| 
视频 讲解 | 本 例 演示 如 何 使 用 localStorage 对 象 保存 用 户 登 录 信息 ， 运 行 结果 如 图 16.1 所 示 。 


DD localhoctnesti heml x 


© © localhost/est] himl 


图 16.1 保存 用 户 登 录 信 息 


当 用 户 在 文本 框 中 输入 用 户 名 与 密码 ， 单 击 “ 登录 ”按钮 后 ， 浏 览 器 将 调用 
localStorage 对 象 保存 登录 用 户 名 。 如 果 选 中 “是 否 保存 密码 ” 复 选 框 ， 会 同时 保存 密 
码 ， 否 则 ， 将 清空 可 能 保存 的 密码 。 当 重新 打开 该 页 面 时 ， 经 过 保存 的 用 户 名 和 密码 
数据 将 分 别 显示 在 文本 框 中 ， 避 免 用 户 重复 登录 。 

线 上 阅读 限于 篇 幅 ， 示 例 代 码 请 参考 本 节 示例 源 代码 ， 或 者 扫 码 阅读 。 


16.2.3 案例 : 流量 统计 


| 
| 本 例 通 过 sessionStorage 和 localStorage 对 页 面 的 访问 进行 计数 。 当 在 文本 框 中 输入 数据 后 ,分 别 
| 单 击 “session 保存 ”按钮 和 “local 保存 ”按钮 对 数据 进行 保存 ， 还 可 以 通过 单 击 “session 读 取 ” 按 
| 钮 和 “local 读 取 ” 按 钮 对 数据 进行 读 取 。 在 Chrome 浏览 器 中 运行 本 实例 的 结果 如 图 16.2 所 示 。 


| 

| [D sensiontorage iocals x 

| © [© locahosiestt him 
| 


本 页 session 访问 次 数 ，7 。 本 页 local 访 问 次 数 ，12 


图 16.2 ”Web 应 用 计数 器 
限于 篇 幅 ， 示 例 代码 请 参考 本 节 示 例 源 代码 ， 或 者 扫 码 阅读 。 
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16.3 Web SQL Database 


HTML5 新 增 Web SQL Database APT, 允许 用 户 使 用 SQL 访 向 客户 端 数 据 库 。 该 API 不 是 HTML5 | 
规范 的 组 成 部 分 ， 而 是 单独 的 规范 ， 它 通过 一 套 方法 操纵 客户 端的 数据 库 。 虽 热 Web SQL Database 
已 经 在 Safari、Chrome 和 Opera 中 实现 ， 但 是 正 、Firefox 并 没有 实现 它 。 

由 于 标准 认定 直接 执行 SQL 语句 不 可 取 ，Web SQL Database 已 被 新 规范 一 索引 数据 库 (Indexed 
Database) 所 取代 。WHATWG 也 停止 对 Web SQL Database 的 开发 。 索 引 数据 库 更 简便 ， 而 且 不 依赖 
于 特定 的 SQL 数据 库 版 本 。 目 前 浏览 器 正在 逐步 实现 对 索引 数据 库 的 支持 。 | 


16.3.1 使 用 Web SQL Database 
HTMLS 数据 库 API 是 以 一 个 独立 规范 形式 出 现 ， 它 包含 三 个 核心 方法 。 


| 视频 讲解 
openDatabase: 使 用 现 有 数据 库 或 创建 新 数据 库 的 方式 创建 数据 库 对 象 。 | 
| 


transaction: 允许 我 们 根据 情况 控制 事务 提交 或 回 滚 。 

executeSql: 用 于 执行 真实 的 SQL 查询 。 

使 用 JavaScript 脚本 编写 SQLite 数据 库 有 两 个 必要 的 步骤 。 

创建 访问 数据 库 的 对 象 。 

使 用 事务 处 理 。 

1. 创建 或 打开 数据 库 

首先 ， 必 须要 使 用 openDatabase() 方 法 来 创建 一 个 访问 数据 库 的 对 象 ， 具 体 用 法 如 下 所 示 。 

Database openDatabase(in DOMString name, in DOMString version, in DOMString displayName. 

in unsigned long estimatedSize. in optional DatabaseCallback creationCallback) 

openDatabase() 方 法 可 以 打开 已 经 存在 的 数据 库 ， 如 果 不 存在 则 创建 。openDatabasek 中 5 个 参数 
分 别 表 示 : 数据 库 名 、 版 本 号 、 描 述 、 数 据 库 大 小 、 创 建 回 调 。 创 建 回调 没有 时 ， 也 可 以 创建 数据 库 。 

【示例 1】 创建 了 一 个 数据 库 对 象 db， 名 称 是 Todo， 版 本 编号 为 0.1。db 还 带 有 描述 信息 和 大 概 
的 大 小 值 。 浏 览 器 可 使 用 这 个 描述 与 用 户 进行 交流 ， 说 明 数 据 库 是 用 来 做 什么 的 。 利 用 代码 中 提供 的 
大 小 值 ， 浏 览 器 可 以 为 内 容留 出 足够 的 存储 。 如 果 需 要 ， 这 个 大 小 是 可 以 改变 的 ， 所 以 没有 必要 预先 | 
假设 允许 用 户 使 用 多 少 空间 。 

db =openDatabase("ToDo". "0.1". "A list of to do items.", 200000): 

为 了 检测 之 前 创建 的 连接 是 否 成 功 ， 可 以 检查 数据 库 对 象 是 否 为 null。 


这 !db) 
alert("Failed to connect to database."): 


< 人 注意 : 使 用 中 绝 不 可 以 假设 该 连接 已 经 成 功 建立 ， 即 使 过 去 对 于 某 个 用 户 它 是 成 功 的 .为 什么 一 
个 连接 会 失败 ， 这 里 面 存在 多 个 原因 : 也 许 浏览 器 出 于 安全 原因 拒绝 访问 , 也许 设备 存储 
有 限 。 面 对 活 跃 而 快速 进化 的 潜在 浏览 器 ， 对 用 户 机 器 、 软 件 及 其 能 力 做 出 假设 是 非常 不 
明智 的 行为 。 如 当 用 户 使 用 手持 设备 时 ， 他 们 可 自由 处 置 的 数据 可 能 只 有 几 兆 字 节 。 
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2. 访问 和 操作 数据 库 

实际 访问 数据 库 时 ， 还 需要 调用 transaction0 方 法 ， 用 来 执行 事务 处 理 。 使 用 事务 处 理 ， 可 以 防 
止 在 对 数据 库 进行 访问 及 执行 有 关 操作 时 受到 外 界 的 打扰 。 因 为 在 Web 上 ， 同 时 会 有 许多 人 都 在 对 
页 面 进行 访问 。 如 果 在 访问 数据 库 的 过 程 中 ,正在 操作 的 数据 被 别 的 用 户 修改 了 时 ,会 引起 很 多 意 想 


不 到 的 后 果 。 因 此 ， 可 以 使 用 事务 来 达到 在 操作 完成 之 前 ， 阻 止 别 的 用 户 访问 数据 库 的 目的 。 


transaction() 方 法 的 使 用 方法 如 下 所 示 。 

db.transaction(fimetion(tx) {}) 

transaction() 方 法 使 用 一 个 回调 函数 作为 参数 。 在 这 个 函数 中 ， 执 行 访问 数据 库 的 语句 。 

在 transaction 的 回调 函数 内 ， 使 用 了 作为 参数 传递 给 回调 函数 的 transaction 对 象 的 executeSql0 
方法 。executeSql0 方 法 的 完整 定义 如 下 所 示 。 

transaction.executeSql(sqlquery.[],dataHandler, errorHandler): 

该 方法 使 用 4 个 参数 ， 第 一 个 参数 为 需要 执行 的 SQL 语句 。 

第 二 个 参数 为 SQL 语句 中 所 有 使 用 到 的 参数 的 数组 。 在 executeSql(0 方 法 中 , 将 SQL 语句 中 所 要 
使 用 到 的 参数 先 用 “?” 代 蔡 ， 然 后 依次 将 这 些 参数 组 成 数组 放 在 第 二 个 参数 中 ， 如 下 所 示 。 

transaction.executeSql("UPDATE people set age-? where name=?:",[age, name]): 

第 三 个 参数 为 执行 SQL 语句 成 功 时 调用 的 回调 函数 。 该 回调 函数 的 传递 方法 如 下 所 示 。 

function dataRandler(transaction. results) { / 执行 SQL 语句 成 功 时 的 处 理 

} 

该 回调 函数 使 用 两 个 参数 ， 第 一 个 参数 为 transaction 对 象 ， 第 二 个 参数 为 执行 查询 操作 时 返回 的 
查询 到 的 结果 数据 集 对 象 。 

第 四 个 参数 为 执行 SQL 语句 出 错时 调用 的 回调 函数 。 该 回调 函数 的 传递 方法 如 下 所 示 。 

function errorHandler(transaction,errmeg) { / 执行 SQL 语句 出 错时 的 处 理 

该 回调 函数 使 用 两 个 参数 ， 第 一 个 参数 为 transaction 对 象 ， 第 二 个 参数 为 执行 发 生 错误 时 的 错误 
信息 文字 。 

【示例 2】 下 面 将 在 mydatabase 数据 库 中 创建 表 tl， 并 执行 数据 插入 操作 ， 完 成 插入 两 条 记录 。 
Var db = openDatabase(mydatabase'`'2.0. my db' 2 * 1024): 
db.transaction(finction(tx) { 
tx.executeSql(CREATE TABLE IF NOT EXISTS tl (id unique. log)): 


tx.executeSql(INSERT INTO tl (id. log) VALUES (1. "foobar")): 
tx.executeSql(INSERT INTO tl (id. log) VALUES (2. "logmsg")): 


D: 
在 插入 新 记录 时 ， 还 可 以 传递 动态 值 。 
var db = openDatabase( mydatabase '. "2.0', ‘my db', 2 * 1024): 
db.transaction(function(tx) { 
tx.executeSql(CREATE TABLE IF NOT EXISTS tl (id unique, log)): 
tx.executeSql(INSERT INTO tl (idlog) VALUES (2. 7?"). [e id.e log]: 
/1/e_id 和 e log 是 外 部 变量 
入 
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当 执 行 查询 操作 时 ， 从 查询 到 的 结果 数据 集中 依次 把 数据 取出 到 页 面 上 来 , 最 简单 的 方法 是 使 用 | 
for 语句 循环 。 结 果 数 据 集 对 象 有 一 个 rows 属性 ， 其 中 保存 了 查询 到 的 每 条 记录 ， 记 录 的 条 数 可 以 用 | 
rows.length 来 获取 , 可 以 用 for 循环 ,用 rows[index] 或 rows.Item ((index]) 的 形式 来 依次 取出 每 条 数据 。 | 
在 JavaScript 脚 本 中 ,一般 采用 rows[index] 的 形式 .另外 在 Chrome 浏览 器 中 ,不 支持 rows.Item ([index)) | 全 
的 形式 。 | 全 一 

【示例 3】 如 果 要 读 取 已 经 存在 的 记录 ， 使 用 一 个 回调 函数 来 捕获 结果 ， 并 通过 for 语句 循环 显 | Note 
示 每 条 记录 。 


Var db = openDatabase(mydatabase. '2.0'. 'my db' 2*1024): 
db.transaction(function(tx) { 
tx.executeSql(CREATE TABLE IF NOT EXISTS tl (id unique. log)): 
tx.executeSql(INSERT INTO t] (id, log) VALUES (1、"foobar )): 
tx.executeSql(INSERT INTO tl (id, log) VALUES (2. "logmse")"): 
D; 
db.transaction(function(tx) { 
tx.executeSql('SELECT * FROM t1", [], function(tx, results) { 
var len = results.rows.length, i: 
msg = "<p>Found rows: " + len + "</p>"; 
document.querySelector(#status).innerHTML += msg: 
for(i=0;i<len; it+) { 
alert(results.rows.item(i).log):; 


} 
}. nulD); 


3 | 
【示例 4】 下 面 示例 将 完整 地 演示 Web SQL Database API 的 使 用 ， 包 括 建立 数据 库 、 建 立 表格 、 | 
插入 数据 、 查 询 数据 、 将 查询 结果 显示 。 在 最 新 版 本 的 Chrome、Safari 或 Opera 浏览 器 中 输出 结果 | 
如 图 16.3 所 示 。 | 


[localhosresti hml x 


© | © localhost/estl him 


完成 消息 创建 和 插入 行 操作 
查询 行 数 : 2 


foobar 


lommsg 


图 16.3 创建 本 地 数据 库 


示例 代码 如 下 所 示 。 

<script type="text/javascript"> 

var db = openDatabase('mydb'. '1.0'. 'Test DB' 2 * 1024 * 1024): 

Var msg: 

db.transaction(function(tx) { 
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique., log)’): 
tx.executeSql(INSERT INTO LOGS (id log) VALUES (1. "foobar")’): 
tx.executeSql(INSERT INTO LOGS (id. log) VALUES (2. "logmsg")): 
msg ='<p> 完 成 消息 创建 和 插入 行 操作 。</p>'; 
document.querySelector('#status'").innerHTML = msg: 
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D; 
| dbtransaction(function(tx) { 
| tx.executeSql(SELECT * FROM LOGS' [], function(tx, results) { 
| var len = results.rows.length, i; 
优 站 | msg = "<p> 查 询 行 数 : "+ len + "</p>"; 
a document.querySelector('#status").innerHTML += msg: 


ss 
msg = "<p><b>" + results.rows.item(i).log + "</b></p>": 
| document.querySelector('#status").innerHTML += msg: 


<div id="status" name="status"></div> 

| 其 中 第 五 行 的 “var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);” 建 立 一 个 名 称 为 
mydb 的 数据 库 ， 它 的 版 本 为 1.0， 描 述 信息 为 Test DB， 大 小 为 2M 字 节 。 可 以 看 到 此 时 有 数据 库 建 
立 ， 但 并 无 表格 建立 ， 如 图 16.4 所 示 。 


DD localhos/restthtml x 


© | © localhost/testL html 


完成 消息 创建 和 插入 行 操作 。 
查询 行 数 : 2 


图 16.4 创建 数据 库 mydb 


| openDatabase() 方 法 打开 一 个 已 经 存在 的 数据 库 ， 如 果 数 据 库 不 存在 则 创建 数据 库 ， 创 建 数据 库 
| 包括 数据 库 名 、 版 本 号 、 描 述 、 数 据 库 大 小 、 创 建 回调 函数 。 最 后 一 个 参数 创建 回调 函数 ， 在 创建 数 
| 据 库 时 调用 ， 但 即使 没有 这 个 参数 ， 一 样 可 以 运行 时 创建 数据 库 。 
| 第 7 一 13 行 代码 如 下 。 
| db.transaction(finction(tx) { 
| txexecuteSql(CREATE TABLE IF NOT EXISTS LOGS (id unique. log)): 
| tx.executeSql(INSERT INTO LOGS (id log) VALUES (1. "foobar")’); 
tx.executeSql(INSERT INTO LOGS (id log) VALUES (2. "logmse")’): 
| msg='<p> 完 成 消息 创建 和 插入 行 操作 。</p>': 
| document.querySelector(#status').innerHTML = msg: 
| | 
| 


| 通过 第 8 行 语句 可 以 在 mydb 数据 库 中 建立 一 个 LOGS 表格 。 在 这 里 只 执行 创建 表格 语句 ， 而 不 
| 执行 后 面 两 个 插入 操作 时 ， 将 在 Chrome 中 可 以 看 到 在 数据 库 mydb 中 有 表格 LOGS 建立 ， 但 表格 


| LOGS 为 空 。 
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第 9、 第 10 两 行 执行 插入 操作 ， 在 插入 新 记录 时 ， 还 可 以 传递 动态 值 。 
var db = openDatabase('mydb’, '1.0', 'Test DB', 2 * 1024 * 1024): 
db.transaction(function(tx) { 

tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique. log)): 
tx.executeSql(INSERT INTO LOGS (idlog) VALUES (?. ?), [e_id, e log]: 


D: 

这 里 的 e_id 和 e_log 为 外 部 变量 ，executeSql 在 数组 参数 中 将 每 个 变量 映射 到 “? ”。 在 插入 操 
作 执 行 后 ， 可 以 在 Chrome 中 看 到 数据 库 的 状态 ， 可 以 看 到 插入 的 数据 ， 此 时 并 未 执行 查询 语句 ， 
页 面 中 并 没有 出 现 查 询 结果 ， 如 图 16.5 所 示 。 


DD localhosyestlhtml x 
© [© localhost/testl ptml 


完成 消息 创建 和 插入 行 操作 。 


图 16.5 创建 数据 表 并 插入 数据 
如 果 要 读 取 已 经 存在 的 记录 ， 使 用 一 个 回调 函数 捕获 结果 ， 如 上 面 的 第 15 一 25 行 代码 。 
db.transaction(function(tx) { 
tx.executeSql(SELECT * FROM LOGS'. []. function(tx, results) { 
Var len = results.rows.length, i: 
msg ="<p> 查 询 行 数 : "+len + "</p>"; 
document.querySelector('#status").innerHTML += msg: 
for(i=0:i<1en:itt) { 
msg = "<p><b>" + results.rows.item(i).log + "</b></p>": 
document.querySelector(#status').innerHTML += msg: 


}. nul); 


YY 
执行 查询 之 后 ， 将 信息 输出 到 页 面 中 ， 可 以 看 到 页 面 中 查询 数据 。 
< 负 注意 : 如 果 不 需 要 ， 不 要 使 用 Web SQL Database， 因 为 它 会 让 代码 更 加 复杂 ( 匿名 内 部 类 的 内 
部 函数 、 回 调 函数 等 ) 。 在 大 多 数 情况 下 ， 本 地 存储 或 会 话 存储 就 能 够 完成 相应 的 任务 ， 
尤其 是 能 够 保持 对 象 状态 持久 化 的 情况 .通过 这 些 HTML5 Web SQL Database API 接 口 ， 
可 以 获得 更 多 功能 , 相信 以 后 会 出 现 一 些 非常 优秀 的 、 建 立 在 这 些 API 之 上 的 应 用 程序 。 
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© [© oahosyiestlntmns 


用 户 登录 
用 户 名 : 
密 码 : 
ETD 
shin 
wnt 
2011/1/14 下 午 2:38: 驾 


图 16.6 用 户 登录 
在 浏览 器 中 访问 页 面 ， 然 后 在 表单 中 输入 用 户 名 和 密码 ， 单 击 “ 登 录 ”按钮 ， 合 
录 成 功 后 ， 用 户 名 、 密 码 以 及 登录 时 间 将 显示 在 页 面 上 。 单 击 “ 注 销 ”按钮 ， 将 清除 
已 经 登录 的 用 户 名 、 密 码 以 及 登录 时 间 。 
限于 篇 幅 ， 示 例 代码 请 参考 本 节 示 例 源 代 码 ， 或 者 扫 码 阅读 。 
| 16.3.3 案例 : 设计 留言 板 


| 本 节 将 使 用 Web Storage 和 Web SQL Database 设计 一 个 简单 Web 留言 本 。 在 示 
| ga 加 。 例 页 面 中 显示 一 个 多 行文 本 框 ， 允 许 用 户 输入 数据 ， 当 单 击 “ 追 加 ”按钮 时 ， 将 文本 
框 中 的 数据 保存 到 localStorage 中 ， 在 表单 下 面 显示 一 个 空 的 p 元 素 ， 作 为 数据 容器 
| 动态 显示 用 户 添加 的 留言 信息 。 

| 编 上 阅读 限于 篇 幅 ， 本 节 3 个 示例 代码 和 代码 解析 请 扫 码 阅读 。 

| 

| 

| 

| 


16.4 indexedDB 


| 与 Web SQL Database 不 同 ，indexedDB 是 对 象 型 数据 库 。 与 Web Storage 和 文件 系统 API 一 样 ， 
| indexedDB 数据 库 的 作用 域 也 被 限制 在 包含 它 的 文档 源 中 : 两 个 同 源 的 Web 页 面 互相 之 间 可 以 访问 对 
| 方 的 数据 ， 但 是 非 同 源 的 页 面 则 不 行 。 

| 在 indexedDB API 中 ,一 个 数据 库 其 实 就 是 一 个 命名 的 对 象 仓库 的 集合 。 每 个 对 象 都 必须 有 一 个 
| 键 (key)， 通 过 该 键 实现 在 存储 区 内 进行 该 对 象 的 存储 和 获取 。 键 必须 是 唯一 的 ， 同 一 个 存储 区 中 的 
| 两 个 对 象 不 能 有 同样 的 键 ， 并 且 它们 必须 按照 自然 顺序 存储 ， 以 便 查 询 。 

目前 , Chrome 11+、Firefox 4+、Opera 18+、Safari 8+ 以 及 IE 10+ 版 本 的 浏览 器 都 支持 IndexedDB API。 


16.4.1 ”建立 连接 


IndexedDB API 操作 步骤 如 下 。 
(1) 通过 指定 名 字 打开 indexedDB 数据 库 。 
| (2) 创建 一 个 事务 对 象 ， 使 用 该 对 象 在 数据 库 中 通过 指定 名 字 查 询 对 象 存储 区 。 
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(3) 调用 对 象 存储 区 的 get0 方 法 来 查询 对 象 ， 或 者 调用 put0 方 法 来 存储 新 的 对 象 。 
如 果 要 避免 覆盖 已 存在 对 象 的 情况 ， 可 以 调用 add0 方 法 。 | 
如 果 想 要 查询 表示 键 值 范围 的 对 象 ， 通 过 创建 一 个 IDBRange 对 象 ， 并 将 其 传递 给 对 象 仓库 的 | 
openCursor() 方 法 。 | 全 内 
如 果 想 要 使 用 次 键 进行 查询 时 ， 通 过 查询 对 象 仓库 中 的 命名 索引 ， 然 后 调用 索引 对 象 上 的 get0 | 一 一 
方法 或 者 openCursor() 方 法 。 | Note 
使 用 indexedDB 数据 库 时 ， 首 先 需 要 预定 义 indexedDB 数据 库 、 该 数据 库 所 用 的 事务 、 | 
IDBKeyRange 对 象 和 游标 对 象 。 为 了 能 够 在 各 浏览 器 中 正常 运行 ， 可 以 按 如 下 代码 针对 各 浏览 器 统 | 
一 进行 定义 。 | 
window.indexedDB = windowindexedDB || window.webkitIndexedDB | 
|| window.mozIndexedDB || windowmsIndexedDB: | 
window.IDBTransaction = window.IDB Transaction || window.webkitIDB Transaction 
|| window.msIDBTransaction: 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange 
|| window.msIDBKeyRange:; 
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor' 


【示例 】 使 用 indexedDB 数据 库 时 ,首先 需要 连接 某 个 indexedDB 数据 库 。 下 面 示例 代码 演示 了 
如 何 连接 到 indexedDB 数据 库 。 
‘<script> 

‘window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB 

|| window.msIndexedDB: | 

window.IDBTransaction = window.IDBTransaction || window.webkitIDB Transaction || window.msIDBTransaction; | 

window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; | 

window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor' | 

| 


function connectDatabase 0O { 
var dbName='indexedDBTest: // 数据 库 名 
Var dbVersion =20170603: / 版 本 号 
var idb: 


必 连接 数据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连 接 的 请 求 对 象 */ 
var dbConnect = indexedDB.open(dbName, dbVersion): 
dbConnectonsuccess= function(e) { 。 / 连接 成 功 
/Wetargetresult 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 
idb = e.target.result: 
alert( 数据 库 连 接 成 功 ): 
上 上 
dbConnectonerror = fonction0 { 
alert( 数 据 库 连接 失败 ): 


上 
</script> 


<input type="button" value=" 连 接 数 据 库 " onclick="connectDatabase0:"/> 


在 浏览 器 中 预览 ， 单 击 “ 连 接 数 据 库 ” 按 钮 ， 可 以 连接 到 indexedDBTest 数据 库 ， 效 果 如 图 16.7 
所 示 。 
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CC IO localhost/testl hin Ad 
这 扶 教 据 库 | 
次 | localhost 显示 : 
全 a 
| 莹 目 尼 大 再 要 示 对 活 企 . 
Note Ce 


图 16.7 连接 到 数据 库 


在 上 面 示例 代码 中 ， 首 先 使 用 indexedDB.open0 方 法 连接 数据 库 。 该 方法 包含 两 个 参数 ， 其 中 第 
一 个 参数 值 为 一 个 字符 串 ， 代 表 数 据 库 名 ， 第 二 个 参数 值 为 一 个 无 符号 长 整 型 数值 ， 代 表 数 据 库 的 版 本 
号 。indexedDB.open() 方 法 返回 一 个 IDBOpenDBRequest 对 象 ， 代 表 一 个 请 求 连接 数据 库 的 请 求 对 象 。 

然后 , 通过 监听 数据 库 连接 的 请 求 对 象 的 onsuccess 事件 和 onerror 事件 来 定义 数据 库 连接 成 功 时 
与 数据 库 连 接 失 败 时 所 需 执行 的 事件 处 理 函 数 。 

在 连接 成 功 的 事件 处 理 函 数 中 ， 取 得 事件 对 象 的 “eventtargetresult ”属性 值 ， 该 属性 值 为 一 个 
IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 。 


容 提示 : 在 Firefox 浏览 器 中 访问 示例 页 面 ， 需 要 将 示例 页 面 放置 在 虚拟 服务 器 运行 环境 


在 indexedDB API 中 ,可 以 通过 indexedDB 数据 库 对 象 的 close0 方 法 关闭 数据 库 连 接 ,代码 如 下 。 
idb.closeO:; 
当 数 据 库 连 接 被 关闭 后 ， 不 能 继续 执行 任何 对 该 数据 库 进 行 的 操作 ， 否 则 浏览 器 均 抛 出 异常 。 


16.4.2 更 新 版 本 


成 功 连接 数据 库 后 ， 还 不 能 执行 任何 数据 操作 ,用 户 还 应 该 创建 对 象 仓库 ， 以 及 用 于 检索 数据 的 
索引 。 这 里 的 对 象 仓库 相当 于 关系 型 数据 库 中 的 数据 表 。 

在 indexedDB 数据 库 中 ， 所 有 数据 操作 都 必须 在 一 个 事务 内 部 执行 。 事 务 分 为 3 种 : 只 读 事务 、 
读 写 事务 和 版 本 更 新 事务 。 

对 于 创建 对 象 仓库 和 索引 的 操作 ， 只 能 在 版 本 更 新 事务 内 部 进行 ， 因 为 在 indexedDB API 中 不 允 
许 数据 库 中 的 数据 仓库 在 同一 个 版 本 中 发 生变 化 , 所 以 当 创建 或 删除 数据 仓库 时 ， 必 须 使 用 新 的 版 本 
号 来 更 新 数据 库 的 版 本 ， 以 避免 重复 修改 数据 库 结构 。 

对 于 数据 库 的 版 本 更 新 处 理 ， 在 HTML5 中 包括 2011 年 12 月 之 前 和 2011 年 12 月 之 后 两 种 不 同 
的 版 本 ,在 Chrome 10 到 22 版 中 使 用 2011 年 12 月 之 前 的 版 本 , 在 Firefox 4+、Chrome 23+、Opera 18+、 
Safari 8 和 下 10+ 版 本 的 浏览 器 中 使 用 2011 年 12 月 之 后 的 版 本 。 

【示例 】 下 面 示例 只 针对 2011 年 12 月 之 后 的 版 本 进行 演示 介绍 。 
| 上 
| window.indexedDB = windowindexedDB || window.webkitIndexedDB || window.mozIndexedDB 
| || windowmsIndexedDB: 
window.IDB Transaction = window.IDB Transaction || window.webkitIDB Transaction || window.msIDBTransaction: 
windowIDBKeyRange= window IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange: 
| window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor: 
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function VersionUpdateO { | 
Var dbName = "indexedDBTest’ // 数据 库 名 | 
var dbVersion = 20170603: // 版 本 号 | 
varidb: | 


#* 连接 数据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连接 的 请 求 对 象 */ 
var dbConnect = indexedDB.open(dbName, dbVersion): 
dbConnectonsuccess= function(e) { 。”// 连接 成 功 

Vertargetresult 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 

idb = e.target.result; 

alert( 数 据 库 连接 成 功 ): 


下 | 
dbConnect.onerror = function0 { | 
alert( 数 据 库 连 接 失 败 '); | 
下 
dbConnectonupgradeneeded = fonction(e) { 
/ 数据 库 版 本 更 新 | 
/etargetresult 为 一 个 IDBDatabase 对 象 ， 代 表 连接 成 功 的 数据 库 对 象 | 
idb = .target.result: | 
/*e.target.transaction 属性 值 为 一 个 IDBTransaction 事务 对 象 ， 此 处 代表 版 本 更 新 事务 */ 
Var tx = €.target.transaction: 
Var oldVersion = e.oldVersion; // 更 新 前 的 版 本 号 | 
var newVersion = e.newVersion: 。“// 更 新 前 的 版 本 号 | 
alert( 数 据 库 版 本 更 新 成 功 ， 旧 的 版 本 号 为 +oldVersiont， 新 的 版 本 号 为 +newVersion): | 
}; 
</scrip> 


<input type="button" value=" 更 新 数据 库 版 本 " onclick="VersionUpdate(:"/> 

在 上 面 代码 中 ， 监 听 数 据 库 连 接 的 请 求 对 象 的 onupgradeneeded 事件 ， 当 连接 数据 库 时 发 现 指定 
的 版 本 号 大 于 数据 库 当 前 版 本 号 时 将 触发 该 事件 , 当 该 事件 被 触发 时 一 个 数据 库 的 版 本 更 新 事务 已 经 
被 开启 ， 同 时 数据 库 的 版 本 号 已 经 被 自动 更 新 完毕 ， 并 且 指 定 在 该 事件 触发 时 所 执行 的 处 理 ， 该 事件 
处 理 函 数 就 是 版 本 更 新 事务 的 回调 函数 。 

在 浏览 器 中 预览 页 面 ， 单 击 页 面 中 的 “更 新 数据 库 版 本 ”按钮 ， 将 弹出 提示 信息 ， 提 示 用 户 数据 
库 版 本 更 新 成 功 ， 如 图 16.8 所 示 。 


DD) ecaihosnestthtml x 
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图 16.8 更 新 数据 库 版 本 
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16.4.3 ”新 建仓 库 


役 频 计 租 | 针对 indexedDB API 中 的 版 本 更 新 处 理 ， 在 Chrome 10 到 22 版 本 的 浏览 器 中 使 用 的 是 2011 年 12 月 
| 之 前 的 版 本 ， 在 Chrome 23+、Opera 18+、IE 10+、Firefox 4+ 和 Safari 8+ 版 本 的 浏览 器 中 均 使 用 的 是 
，2011 年 12 月 之 后 的 版 本 ， 下 面 示例 针对 第 二 种 版 本 介绍 如 何 创建 对 象 仓库 。 
ee 
| window.indexedDB = windowindexedDB || window.webkitIndexedDB || window.mozIndexedDB 
|| window.msIndexedDB: 
window.IDBTransaction = window.IDB Transaction || window.webkitIDB Transaction || window.msIDBTransaction: 
window.IDBKeyRange = window.IDBKeyRangel| window. webkitIDBKeyRange || window.msIDBKeyRange; 
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor' 


function CreateObjectStoreO { 
var dbName = "indexedDBTest': // 数据 库 名 
Var dbVersion = 20170305: // 版 本 号 
var idb: 


| 
| 旋 连接 数据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数 据 库 连接 的 请 求 对 象 所 
| var dbConnect = indexedDB.open(dbName. dbVersion): 
dbConnect.onsuccess = function(e) { 。“”// 连接 成 功 
// e.target.result 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 
| idb = e.target.result: 
| alert(' 数 据 库 连 接 成 功 '); 
| 上 
dbConnect.onerror = function() falert( 数 据 库 连接 失败 7.}: 
dbConnectonupgradeneeded = function(e) { 
| / 数据 库 版 本 更 新 
| /etargetresult 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 
| idb = e.target.result; 
人 #e.target.transaction 属性 值 为 一 个 IDBTransaction 事务 对 象 ， 此 处 代表 版 本 更 新 事务 */ 
Var tx = €.target.transaction; 
Var name = "Users' 
| Var optionalParameters= { 
| keyPath: "userId'. 


| autoIncrement: false 

| 站 

| Var store = idb.createObjectStore(name, optionalParameters): 
| alert( 对 象 仓库 创建 成 功 ): 

| } 

| 

| ‘</script> 


<input type="button" value=" 创 建 对 象 仓库 " onclick="CreateObjectStore0:" /> 


在 上 面 代码 中 ， 监 听 数 据 库 连 接 的 请 求 对 象 的 onupgradeneeded 事件 ， 并 且 指 定 在 该 事件 触发 时 
| 调用 数据 库 对 象 的 createObjectStore() 方 法 创建 对 象 仓库 。 
| createObjectStore0 方 法 包含 两 个 参数 ， 第 一 个 参数 值 为 一 个 字符 串 ， 代 表 对 象 仓 库 名 ; 第 二 个 参 
| 数 为 可 选 参 数 optionalParameters， 参 数值 为 一 个 JavaScript 对 象 ， 该 对 象 的 keyPath 属性 值 用 于 指定 
| 对 象 仓库 中 的 每 一 条 记录 使 用 哪个 属性 值 来 作为 该 记录 的 主键 值 。 
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一 条 记录 的 主键 为 数据 仓库 中 该 记录 的 唯一 标识 符 ,在 一 个 对 象 仓库 中 ， 只 能 有 一 个 主键 , 但 是 
主键 值 可 以 重复 ， 相 当 于 关系 型 数据 库 中 数据 表 的 id 字段 为 数据 表 的 主键 ， 多 条 记录 的 id 字段 值 可 
以 重复 ， 除 非 将 主键 指定 为 唯一 主键 。 


在 indexedDB API 中 ， 对 象 仓库 中 的 每 一 条 记录 均 为 具有 一 个 或 多 个 属性 值 的 一 个 对 象 ， 而 | 
keyPath 属性 值 用 于 指定 每 一 条 记录 使 用 哪个 属性 值 作为 该 记录 的 主键 值 。 例 如 ， 在 这 里 将 数据 记录 | 


的 userId 属性 值 作为 每 条 记录 的 主键 值 , 相当 于 在 关系 型 数据 库 中 将 每 条 记录 的 userId 字段 值 指定 为 
该 记录 的 主键 值 。 


在 这 种 情况 下 , 因为 主键 存在 于 每 条 记录 内 部 , 所 以 被 称 为 内 联 主键 , 如 果 在 这 里 不 指定 keyPath | 


属性 值 ， 或 将 其 指定 为 null， 每 条 记录 的 主键 将 通过 其 他 的 途径 被 另行 指定 ， 这 时 因为 数据 记录 的 主 
键 存在 于 每 条 记录 之 外 ， 所 以 被 称 为 外 部 主键 。 
optionalParameters 对 象 的 autoincrement 属性 值 为 true, 相当 于 在 关系 型 数据 库 中 将 主键 指定 为 自 


增 主键 ,如果 添加 数据 记录 时 不 指定 主键 值 , 则 在 数据 仓库 内 部 将 自动 指定 该 主键 值 为 已 经 存在 的 最 | 


大 主键 值 +1 。 也 可 以 在 添加 数据 记录 时 显 式 地 指定 主键 值 。 如 果 将 optionalParameters 对 象 的 
autoincrement 属性 值 指 定 为 false， 则 必须 在 添加 数据 记录 时 显 式 地 指定 主键 值 。 
createObjectStore0 方 法 返回 一 个 DBObjectStore 对 象 ， 该 对 象 代表 被 创建 成 功 的 对 象 仓库 。 
在 Chrome 浏览 器 中 打开 示例 页 面 ， 单 击 页 面 中 的 “创建 对 象 仓库 ”按钮 ， 弹 出 提示 信息 ， 提 示 
用 户 users 对 象 仓库 创建 成 功 ， 如 图 16.9 所 示 。 


DD localhoanesti html x 
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EE 
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图 16.9 创建 对 象 仓库 成 功 
16.4.4 ”新 建 索引 


indexedDB 数据 库 中 的 索引 类 似 于 关系 型 数据 库 中 的 索引 ， 需 要 通过 数据 记录 对 象 的 某 个 属性 值 | 


来 创建 。 在 indexedDB 数据 库 中 创建 索引 之 后 ,可 以 提高 在 对 数据 仓库 中 的 所 有 数据 记录 进行 检索 时 
的 性 能 。 

在 关系 型 数据 库 中 ,可 以 针对 非 索引 字段 进行 检索 ， 而 在 indexedDB 数据 库 中 ， 只 能 针对 被 设 为 
索引 的 属性 值 进 行 检索 。 

针对 indexedDB API 中 的 版 本 更 新 处 理 , 分 为 在 Chrome 18 到 22 版 本 的 浏览 器 中 使 用 的 2011 年 
12 月 之 前 的 版 本 ， 在 Chrome 23+、Opera 18+、IE 10+、Firefox 4+ 和 Safari 8+ 版 本 的 浏览 器 中 使 用 的 
2011 年 12 月 之 后 的 版 本 。 


【示例 】 下 面 示例 只 针对 第 二 种 版 本 进行 介绍 。 在 indexedDB 数据 库 中 ,不 能 重复 创建 同名 的 对 | 


象 仓 库 ， 所 以 在 本 示例 中 将 对 象 仓库 名 修改 为 ewUsers， 避 免 在 运行 完 16.4.3 节 示 例 之 后 继续 运行 
代码 ， 浏 览 器 将 抛 出 异常 。 
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<script> 
window.indexedDB = windowindexedDB || window.webkitIndexedDB || window.mozIndexedDB 

|| windowmsIndexedDB: 
window.IDBTransaction = window.IDB Transaction || window.webkitIDB Transaction || window.msIDBTransaction: 
window.IDBKeyRange = window.IDBKeyRangel| window.webkitIDBKeyRange || window.msIDBKeyRange: 
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor: 


function CreateIndex | { 
var dbName = 'indexedDBTest': // 数据 库 名 
Var dbVersion = 20150306: / 版 本 号 
var idb: 


/* 连接 数据 库 ，dbConnect 对 象 为 一 个 IDBOpenDBRequest 对 象 ， 代 表 数据 库 连接 的 请 求 对 象 */ 
var dbConnect = indexedDB.open(dbName, dbVersion): 
dbConnectonsuccess = function(e) { // 连接 成 功 

/etargetresult 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 

idb = etargetTesult: 

alert( 数 据 库 连接 成 功 ): 
}; 
dbConnect.onerror = function0 { 

alert( 数 据 库 连接 失败 7: 
dbConnect.onupgradeneeded = function(e) { 

/ 数据 库 版 本 更 新 

// e.target.result 为 一 个 IDBDatabase 对 象 ， 代 表 连 接 成 功 的 数据 库 对 象 

idb = e.target.result: 

/*e.target.transaction 属性 值 为 一 个 IDBTransaction 事务 对 象 ， 此 处 代表 版 本 更 新 事务 *#/ 

Var tx = €.target.transaction; 

var name = newUsers'; 

Var optionalParameters = { 

keyPath: "userId', 
autoIncrement: false 

时 
Var store = idb.createObjectStore(name, optionalParameters): 
alert( 对 象 仓库 创建 成 功 ): 
Var name = ‘userNameIndex’; 
Var keyPath = "userName'; 
Var optionalParameters= { 

unique: false. 

multiEntry: false 
中 
Var idx = store.createIndex(name, keyPath., optionalParameters): 
alert( 索 引 创建 成 功 ):; 


</script> 

<input type="button" value=" 创 建 索引 " onclick="CreateIndex0:"/> 

在 数据 库 的 版 本 更 新 事务 中 ， 在 对 象 仓库 创建 成 功 后 ， 调 用 对 象 仓库 的 createIndex0 方 法 创建 索 
。 该 方法 包含 以 下 3 个 参数 。 

第 一 个 参数 值 为 一 个 字符 串 ， 代 表 索 引 名 。 
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第 二 个 参数 值 代表 使 用 数据 仓库 中 数据 记录 对 象 的 哪个 属性 来 创建 索引 。 在 本 示例 代码 中 ， 虽 然 
索引 名 与 用 于 创建 索引 的 属性 名 不 同 , 但 是 实际 上 此 处 索引 名 与 属性 名 也 可 以 相同 , 例如 ， 此 处 可 以 
将 索引 名 定义 为 userName。 


第 三 个 参数 optional Parameters 为 可 选 参数 ， 参 数值 为 一 个 JavaScript 对 象 ， 该 对 象 的 unique 属 | 
性 值 的 作用 相当 于 关系 型 数据 库 中 索引 的 unique 属性 值 的 作用 。 属性 值 为 tue, 代表 同一 个 对 象 仓库 | 


中 两 条 数据 记录 的 索引 属性 值 ( 即 userName 属性 值 ) 不 能 相同 ， 和 否则 在 向 数据 仓库 中 添加 第 二 条 数 
据 记 录 时 将 导致 添加 失败 。 

optionalParameters 对 象 的 multiEntry 属 性 值 为 tue, 代表 当 数 据 记 录 的 索引 属性 值 为 一 个 数组 时 ， 
可 以 将 数组 中 的 每 一 个 元 素 添加 在 索引 中 ; multiEntry 属性 值 为 false， 代 表 只 能 将 该 数组 整体 添加 在 
索引 中 。 

createIndex() 方 法 返回 一 个 IDBIndex 对 象 ， 代 表 创 建 索引 成 功 。 

在 Chrome 浏览 器 中 打开 示例 页 面 ， 单 击 页 面 中 的 “创建 索引 ”按钮 ， 弹 出 提示 信息 ， 提 示 用 户 
索引 创建 成 功 ， 如 图 16.10 所 示 。 
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图 16.10 ”创建 索引 成 功 


16.4.5 ”使 用 事务 


在 indexedDB API 中 ， 所 有 针对 数据 的 操作 都 只 能 在 一 个 事务 中 被 执行 。indexedDB 提供 三 类 事 
务 模式 ， 简 单 说 明 如 下 。 

readonly: 只 读 。 提 供 对 某 个 对 象 存储 的 只 读 访问 ， 在 查询 对 象 存储 时 使 用 。 

readwrite: 读 写 。 提 供 对 某 个 对 象 存储 的 读 取 和 写 入 访问 权 。 

versionchange: 数据 库 版 本 更 新 。 提 供 读 取 和 写 入 访问 权 来 修改 对 象 存储 定义 ， 或 者 创建 一 

个 新 的 对 象 存 储 。 

默认 的 事务 模式 为 readonly。 用 户 可 在 任何 给 定时 刻 内 打开 多 个 并 发 的 readonly 事务 ， 但 只 能 

打开 一 个 readwrite 事务 。 出 于 此 原因 ， 只 有 在 数据 更 新 时 才 考虑 使 用 readwrite 事务 。 单 独 的 〈 表 


示 不 能 打开 任何 其 他 并 发 事务 ) versionchange 事务 操作 一 个 数据 库 或 对 象 存储 。 可 以 在 | 


onupgradeneeded 事件 处 理 函 数 中 使 用 versionchange 事务 创建 、 修 改 或 删除 一 个 对 象 仓 库 ， 或 者 将 
一 个 索引 添加 到 对 象 仓库 。 

在 indexedDB API 中 ， 使 用 某 个 已 建立 连接 的 数据 库 对 象 的 transaction() 方 法 可 以 开启 事务 。 例 
如 ， 要 在 readwrite 模式 下 为 employees 对 象 仓库 创建 一 个 事务 。 


Vartransaction = db.transaction("employees" "readwrite"): 
transaction() 方 法 包含 以 下 两 个 参数 。 
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回 ”第 一 个 参数 为 由 一 些 对 象 仓库 名 组 成 的 一 个 字符 串 数 组 , 用 于 定义 事务 的 作用 范围 ， 即 限定 
该 事务 中 所 运行 的 读 写 操作 只 能 针对 哪些 对 象 仓库 进行 , 当 事 务 中 的 数据 存 取 操 作 只 针对 某 
个 对 象 仓 库 进 行 时 。 
”党 提示 : 如 果 不 想 限定 事务 只 针对 哪些 对 象 仓库 进行 ,那么 可 以 使 用 数据 库 的 objectStoreNames 局 
Re | 性 值 来 作为 tansaction() 方 法 的 第 一 个 参数 值 ， 代 码 如 下 。 
| Var transaction = db.transaction(idb.objectStoreNames. "readwrite"):; 
数据 仓库 的 objectStoreNames 属性 值 为 由 该 数据 库 中 所 有 对 象 仓库 名 构成 的 数组 ， 在 将 其 作为 
| transaction( 方 法 的 第 一 个 参数 值 时 ， 可 以 针对 数据 库 中 任何 一 个 对 象 仓库 进行 数据 的 存 取 操 作 。 
第 二 个 参数 为 可 选 参数 ,用 于 定义 事务 的 读 写 模式 , 即 指定 事务 为 只 读 事 务 , 还 是 读 写 事务 。 
transaction() 方 法 返回 一 个 IDBTransaction 对 象 ， 代 表 被 开启 的 事务 。 
< 人 注意 :在 将 数据 库 的 objectStoreNames 属性 值 作为 transaction() 方 法 的 第 一 个 参数 值 ,将 "readwrite" 
常量 值 作为 transaction() 方 法 的 第 二 个 参数 值 ， 运 行 transaction() 方 法 之 后 ， 虽 然 在 接 下 来 
的 代码 中 可 以 不 必 再 注意 事务 针对 哪些 对 象 仓库 进行 , 以 及 事务 为 只 读 事务 , 还 是 读 写 事 
务 ， 但 是 这 种 做 法 将 对 事务 在 运行 时 的 性 能 产生 很 大 的 不 利 影响 。 考 虑 到 运行 时 的 性 能 ， 
建议 应 该 正确 指定 事务 的 作用 范围 ， 以 及 事务 的 读 写 模式 。 


| 容 提示 : 在 indexedDB API 中 ,可 以 同时 运行 多 个 作用 范围 不 重 查 的 读 写 事务 ， 如 果 数据 库 中 存在 
| storeA 和 storeB 两 个 对 象 仓库 ,事务 A 的 作用 范围 为 storeA, 事 务 B 的 作用 范围 为 storeB， 
那么 可 以 同时 运行 事务 A 和 事务 B。 如 果 将 事务 A 的 作用 范围 修改 为 同时 包括 storeA 和 
storeB 两 个 对 象 仓库 , 且 先 运行 事务 A, 那么 事务 B 必须 等 到 事务 A 运行 结束 后 才能 运行 。 
即使 事务 A 为 只 读 事务 ， 仍 然 可 以 同时 运行 事务 A 和 事务 B。 
在 indexedDB API 中 ， 用 于 开启 事务 的 transaction0 方 法 必须 被 书写 到 某 一 个 函数 中 ， 而 且 该 事 
务 将 在 函数 结束 时 被 自动 提交 ， 所 以 不 需要 显 式 调用 事务 的 commit0 方 法 来 提交 事务 , 但 是 可 以 在 需 
要 时 显 式 调用 事务 的 abort0 方 法 来 中 止 事 务 。 
可 以 通过 监听 事务 对 象 的 oncomplete 事件 (事务 结束 时 触发 ) 和 onabort 事件 (事务 中 止 时 触发 )， 
并 定义 事件 处 理 函 数 来 定义 事务 结束 或 中 止 时 所 要 执行 的 处 理 。 例 如 : 
Var transaction = db.transaction(idb.objectStoreNames. "readwrite"): 
transaction.oncomplete = function(event) { 。/ 事务 结束 时 所 要 执行 的 处 理 


| ) 
| transaction.onabort = function(event) { // 事务 中 止 时 所 要 执行 的 处 理 
| 


// 事务 中 的 处 理 内 容 
transaction.abort(): / 中止 事务 


16.4.6 ”保存 数据 


六 昌 串 于 涅 介绍 如 何 从 indexedDB 数据 库 的 对 象 仓库 中 保存 数据 。 示 例 代码 


和 解析 请 扫 码 阅读 。 
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16.4.7 ”访问 数据 


本 节 介 绍 如 何 从 indexedDB 数据 库 的 对 象 仓库 中 获取 数据 。 示 例 完整 代码 和 
解析 请 扫 码 阅读 。 


16.4.8 ”访问 键 值 


通过 对 象 仓库 或 索引 的 get0 方 法 ， 只 能 获取 到 一 条 数据 。 在 需要 通过 某 个 检 
索 条 件 来 检索 一 批 数据 时 ， 需 要 使 用 indexedDB API 中 的 游标 。 
下 面 示例 设计 根据 数据 记录 的 主键 值 检 索 数据 ， 示 例 完 整 代码 请 扫 码 阅读 。 


16.4.9 访问 属性 


在 indexedDB API 中 , 可 以 将 对 象 仓库 的 索引 属性 值 作为 检索 条 件 来 检索 数据 。 
下 面 看 一 个 完整 示例 。 
限于 篇 幅 ， 示 例 代 码 和 解析 请 扫 码 阅读 。 


16.5 案例 : 设计 录入 表单 


本 例 使 用 indexedDB API 设计 一 个 电子 刊物 发 布 的 应 用 ， 演 示 效 果 如 图 16.11 所 示 。 在 示例 页 面 
中 ， 显 示 3 个 表单 框 ， 第 一 个 表单 框 登录 电子 刊物 信息 ， 并 保存 在 indexedDB 数据 库 中 。 第 二 个 表单 
框 用 于 管理 数据 库 中 的 记录 ， 可 以 根据 需要 清空 全 部 记录 , 或 者 删除 指定 的 记录 。 第 三 个 表单 框 用 于 
显示 数据 库 中 所 有 的 电子 刊物 记录 。 


1 
其 这 爷 尖 在 大 阳光 和 人 电源 时 和 


大 脑 使 用 指南 


-a9e9 
16.11 ”电子 刊物 发 布 应 用 效果 


具体 操作 步骤 请 扫 码 学 习 。 
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JavaScript 图 形 设计 


HTML 5 新 增 <canvas> 标 签 ， 并 提供 了 一 套 Canvas API， 多 许 用 户 通过 使 用 JavaScript 
脚本 在 <canvas> 标 签 标识 的 画布 上 绘制 图 形 、 创 建 动画 , 甚至 可 以 进行 实时 视频 处 理 或 浑 染 ， 
本 章 将 重点 介绍 Canvas API 的 基本 用 法 ， 帮 助 用 户 在 网 页 中 绘制 漂亮 的 困 形 ， 创 造 丰富 多 
彩 、 贵 心 悦 目 的 Web 动画 


【 学 习 重 点 】 


a 


吾 至 至 


使 用 canvas 元 素 

绘制 图 形 。 

设置 图 形 样式 

灵活 使 用 Canvas API 设计 网 页 动画 
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17.1 使 用 canvas 


在 HIML 5 文档 中 ， 使 用 <canvas> 标 签 可 以 在 网 页 中 创建 一 块 画布 ， 用 法 如 下 所 示 。 
<canvas id="myCanvas" width="200" height="100"></canvas> 

该 标签 包含 3 个 属性 。 

回 id: 用 来 标识 画布 ， 以 方便 JavaScript 脚本 对 其 引用 。 | 
height: 设置 canvas 的 高 度 。 | 
width: 设置 canvas 的 宽度 。 | 
在 默认 情况 下 ，canvas 创建 的 画布 大 小 为 宽 300 像素 、 高 150 像素 ， 可 以 使 用 width 和 height 属 

性 自 定义 其 宽度 和 高 度 。 


< 拟 注意 : 与 <img> 不 同 ，<canvas> 需 要 结束 标签 </canvas>。 如 果 结束 标签 不 存在 ， 则 文档 的 其 余部 
分 会 被 认为 是 替代 内 容 ， 将 不 会 显示 出 来 。 
【示例 1】 可 以 使 用 CSS 控制 canvas 的 外 观 。 例 如， 在 下 面 示例 中 使 用 style 属性 为 canvas 元 素 
添加 一 个 实心 的 边框 ， 在 浏览 器 中 的 预览 效果 如 图 17.1 所 示 。 
<canvas id="myCanvas" style="border: 1px solid;" width="200" height="100"></canvas> 
使 用 JavaScript 可 以 在 canvas 画布 内 绘画 ， 或 设计 动画 。 
【操作 步骤 】 
(1) 在 HTMLS5 页 面 中 添加 <canvas> 标 签 ， 设 置 canvas 的 id 属性 值 以 便 JavaScript 调用 。 


<canvas id="myCanvas" width="200" height="100"></canvas> 
(2) 在 JavaScrip 脚本 中 使 用 document.getElementById0 方 法 ， 根 据 canvas 元 素 的 id 获取 对 
canvas 的 引用 。 
var ¢ = document.getElementById("myCanvas"): 
(3) 通过 canvas 元 素 的 getContext() 方 法 获取 画布 上 下 文 (context)， 创 建 context 对 象 ， 以 获取 
允许 进行 绘制 的 2D 环境 。 
Var context = c.getContext("2d"): 
getContext("2d") 方 法 返回 一 个 画布 泻 染 上 下 文 对 象 ， 使 用 该 对 象 可 以 在 canvas 元 素 中 绘制 图 形 ， 
参数 "2d" 表 示 二 维 绘图 。 
(4) 使 用 JavaScript 进行 绘制 。 例 如 ， 使 用 以 下 代码 可 以 绘制 一 个 位 于 画布 中 央 的 矩形 。 
context fillStyle = "#FFOOFF": 
context.fillRect(50.25.100,50): 
这 两 行 代码 中 , fillStyle 属性 定义 将 要 绘制 的 矩形 的 填充 颜色 为 粉红 色 , fillRect0 方 法 指定 了 要 绘 
制 的 矩形 的 位 置 和 尺寸 。 图 形 的 位 置 由 前 面 的 canvas 坐标 值 决定 , 尺寸 由 后 面 的 宽度 和 高 度 值 决 定 。 
在 本 例 中 ， 坐 标 值 为 (50,.25)， 尺 寸 为 宽 100 像素 、 高 50 像素 ， 根 据 这 些 数值 ， 粉 红色 和 矩形 将 出 现 
在 画面 的 中 央 。 
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| 【示例 2】 下 面 给 出 完整 的 示例 代码 。 
| 

| <canvas id="myCanvas" style="border:1px solid:" width="200" height="100"></canvas> 
| 


| context fillStyle = "#FFOOFF": 
context fllRect(50.25,100.50) 
| </script> 


| 以 上 代码 在 浏览 器 中 的 预览 效果 如 图 17.2 所 示 。 在 画布 周围 加 了 边框 是 为 了 更 能 清楚 地 看 到 中 
| 间 珑 形 位 于 画布 的 什么 位 置 。 


图 17.1 为 canvas 元 素 添加 实心 边框 图 17.2 使 用 canvas 绘制 图 形 
fillRect(50,25,100,50) 方 法 用 来 绘制 矩形 图 形 , 它 的 前 两 个 参数 用 于 指定 绘制 图 形 的 x 轴 和 y 轴 坐 
| 标 ， 后 面 两 个 参数 设置 绘制 矩形 的 宽度 和 高 度 。 
在 canvas 中 ， 坐 标 原点 〈0,0) 位 于 canvas 画布 的 左上 角 ，x 轴 水 平 向 右 延伸 ，y 轴 垂 直 向 下 延 
伸 ， 所 有 元 素 的 位 置 都 相对 于 原点 进行 定位 ， 如 图 17.3 所 示 。 


| 
| 
| 
| 
| 
| 
| 坐标 原点 (0.0) 绘制 图 形 的 坐标 起 点 (50.25) 
| 
| 
| 
| 
| 
| 
| 


y 轴 垂 直 向 下 延伸 \ 
x 轴 水 平 向 右 延 伸 


17.3 canvas 默认 坐标 点 


目前 ，IE 9+、Firefox、Opera、Chrome 和 Safari 版 本 浏览 器 均 支 持 canvas 元 素 及 其 属性 和 方法 。 

老 版 本 浏览 器 可 能 不 支持 canvas 元 素 , 因此 在 特定 用 户 群 中 , 需要 为 这 些 浏览 器 提供 替代 内 容 。 
| 只 需要 在 <canvas> 标 签 内 嵌入 蔡 代 内 容 ， 不 支持 canvas 的 浏览 器 会 忽略 canvas 元 素 ， 而 显示 蔡 代 内 
| 容 ， 支持 canvas 的 浏览 器 则 会 正常 泻 染 canvas， 而 忽略 普 代 内 容 。 例 如 : 
”nv dkGraph" width="150" height="150 必 当前 浏览 器 暂 不 支持 canvas <Jcanvas> 

<canvas id="clock" width="150" height="150"> 

<img src="images/clock png" width="150" height="150" alt=""/> 

| </canvas> 
| 
| 4 注意 : 使 canvas 元 素 可 以 实现 绘图 功能 ， 也 可 以 设计 动画 演示 ， 但 是 如 果 HTML 页 面 中 有 比 
| canvas 元 素 更 合适 的 元 素 存在 ， 则 建议 不 要 使 用 canvas 元 素 。 例 如 ， 用 canvas 元 素来 泻 
| 染 HTML 页 面 的 标题 样式 标签 则 不 太 合适 。 
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17.2 绘制 图 形 


本 节 将 介绍 一 些 基本 图 形 的 绘制 ， 包 括 和 矩形 、 直 线 、 圆 形 、 曲 线 等 形状 或 路 径 。 


17.2.1 和 扼 形 


canvas 仅 支持 一 种 原生 的 图 形 绘制 : 矩形 。 绘 制 其 他 图 形 都 至 少 需要 生成 一 条 路 径 。 不 过 ， 拥 有 
众多 路 径 生 成 的 方法 ， 绘 制 复杂 图 形 也 很 轻松 。 

canvas 提供 了 以 下 3 种 方法 绘制 矩形 。 

fillRect(x, y, width, height): 绘制 一 个 填充 的 矩形 。 

strokeRect(x, y, width, height): 绘制 一 个 矩形 的 边框 。 

clearRect(x, y, width, height): 清除 指定 矩形 区 域 ， 让 清除 部 分 完全 透明 。 

参数 说 明 如 下 。 


y: 矩形 左上 角 的 y 坐标 。 
width: 矩形 的 宽度 ， 以 像素 为 单位 。 
height: 矩形 的 高 度 ， 以 像素 为 单位 。 

【示例 】 下 面 示例 分 别 使 用 上 述 3 种 方法 绘制 了 3 个 嵌 套 的 矩形 ， 预 览 效果 如 图 17.4 所 示 。 
<canvas id="canvas" width="300" height="200" style="border:solid 1px #999:"></canvas> 
<script> 
drawO: 
function drawO { 

Var Canvas = document.getElementById('‘canvas’): 
if (canvas.getContext) { 
Var ctx = canvas.getContext('2d"); 
ctx.fillRect(25,25.,100.100): 
ctx.clearRect(45.45,60.60); 
ctx.strokeRect(50,50,50.,50); 


</script> 


图 17.4 ”绘制 矩形 


在 上 面 代 码 中 ,flRect(O 方 法 绘制 了 一 个 边 长 为 100 像素 的 黑色 正方 形 。clearRect0 方 法 从 正方 形 
的 中 心 开始 擦 除了 一 个 60 像素 X60 像素 的 正方 形 ， 接 着 strokeRect0 在 清除 区 域内 生成 一 个 50 像素 
X50 像素 的 正方 形 边框 。 


窟 提示: 不 同 于 路 径 函 数 ， 以 上 3 个 函数 绘制 之 后 ， 会 马上 显现 在 canvas 上 ， 即 时 生效 。 
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| 17.2.2 路径 


| ”图形 的 基本 元 素 是 路 径 。 路径 是 通过 不 同 颜色 和 宽度 的 线段 或 曲线 相连 形成 的 不 同形 状 的 点 的 集 
| 合 。 一 个 路 径 ， 甚 至 一 个 子路 径 ， 都 是 闭合 的 。 使 用 路 径 绘制 图 形 的 步骤 如 下 。 

| (1) 创建 路 径 起 始点 。 

(2) 使 用 画图 命令 绘制 路 径 。 

| (3) 把 路 径 封 闭 。 

(4) 生成 路 径 后 ， 可 以 通过 描 边 或 填充 路 径 区 域 来 泻 染 图 形 。 

需要 调用 的 方法 说 明 如 下 。 

beginPathO: 开始 路 径 。 新 建 一 条 路 径 ， 生 成 后 ， 图 形 绘制 命令 被 指向 到 路 径 上 生成 路 径 。 
closePathO: 闭合 路 径 。 闭 合 路 径 之 后 图 形 绘制 命令 又 重新 指向 到 上 下 文中 。 

stroke0: 描 边 路 径 。 通 过 线条 来 绘制 图 形 轮廓 。 

| fill0: 填充 路 径 。 通 过 填充 路 径 的 内 容 区 域 生成 实心 的 图 形 。 

| 窑 提示 : 生成 路 径 的 第 一 步 是 调用 beginPath0 方 法 . 每 次 调用 这 个 方法 后 ,表示 开始 重新 绘制 新 的 
图 形 。 闭 合 路 径 closePath0 不 是 必需 的 。 当 调用 fill0 方 法 时 ， 所 有 没有 闭合 的 形状 都 会 自 
动 闭合 ， 所 以 不 需要 调用 closePath() 方 法 ， 但 是 调用 stroke() 时 不 会 自动 闭合 . 


【示例 1】 下 面 示例 绘制 一 个 三 角形 ， 效 果 如 图 17.5 所 示 。 代 码 仅 提供 绘图 函数 draw0， 完 整 代 
| 码 可 以 参考 17.2.1 节 示例 ， 后 面 各 节 示例 类 似 。 


加 加 加 加 


| 

| 

| 

| 

| 

| 

| Var canvas = document.getElementById('canvas"); 
| if (canvas.getContext) { 
| 

| 

| 

| 

| 

| 

| 

| 


ctx.moveTo(75,50); 
ctx.lineTo(100,75); 
ctx.lineTo(100.25): 
ctx.fillO; 


) 


| 使 用 moveTo(x, y) 方 法 可 以 将 笔触 移动 到 指定 的 坐标 x 和 y 上 。 当 初始 化 canvas， 或 者 调用 
| beginPath() 方 法 后 ， 通 常会 使 用 moveTo0 方 法 重新 设置 起 点 。 
【示例 2】 用 户 可 以 使 用 moveTo0 方 法 绘制 一 些 不 连续 的 路 径 。 下 面 示例 绘制 一 个 笑脸 图 形 ， 效 


| 果 如 图 17.6 所 示 。 
[© @ eecto- -se] 


| 图 17.5 绘制 三 角形 图 17.6 绘制 笑脸 
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| 
function drawO { | 
Var canvas = document.getElementById('canvas"); | 
if (canvas.getContext) { | 
Var ctx = canvas.getContext(2d): | 食 内 


ctx.beginPath(); 

ctx.arc(75.75,50.0,Math.PI*2.true); // 绘制 

ct moveTo(110775). Er 
ctx.arc(75,75.35.0,Math.PLfalse); 。 // 口 〈 顺 时 针 ) 


ctx.moveTo(65,65); 
ctx.arc(60.65.5.0,Math.PI*2,true):; // 左 眼 


ctx.moveTo(95.65); 
ctx.arc(90.65.5.0,Math.PI*2.,true); // 右 眼 


ctx.stroke(); 


人 


} 


上 面 代码 中 使 用 到 arce0 方 法 ， 调 用 它 可 以 绘制 圆 形 ， 在 后 面 小 节 中 将 详细 说 明 。 
17.2.3 直线 


使 用 lineTo() 方 法 可 以 绘制 直线 ， 用 法 如 下 。 
lineTo(x,y) 


参数 x 和 y 分 别 表示 终点 位 置 的 x 坐标 和 y 坐标 。lineTo(x, y) 将 绘制 一 条 从 当前 位 置 到 指定 (x, y) | 
位 置 的 直线 。 
【示例 】 下 面 示 例 绘制 两 个 三 角形 ， 一 个 是 填充 的 ， 另 一 个 是 描 边 的， 效果 如 图 17.7 所 示 。 


function drawO { 

Var canvas = document.getElementById(Ccanvas'): 

if (canvas.getContext) { 
Var Ctx = canvas.getContext(2d'"): 
// 填充 三 角形 
ctx.beginPath():; 
ctx.moveTo(25,25); 
ctx.lineTo(105.25): 
ctx.lineTo(25,105); 
ctx.fillO; 
1/ 描 边 三 角形 
ctx.beginPathO:; 
ctx.moveTo(125.125): 
ctx.lineTo(125.45); 
ctx.lineTo(45.125); 
ctx.closePathO: 
ctx.strokeO: 


} 
由 


在 上 面 示例 代码 中 ,从 调用 beginPath0 方 法 准备 绘制 一 个 新 的 形状 路 径 开 始 , 使 用 moveTo0 方 法 
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移动 到 目标 位 ， 两 条 线段 绘制 后 构成 三 角形 的 两 条 边 。 当 路 径 使 用 填充 〈filled) 时 ， 路 径 自 动 闭合 ; 
而 使 用 描 边 〈stroked) 则 不 会 闭合 路 径 。 如 果 没 有 添加 闭合 路 径 closePath0 到 描 边 三 角形 中 ， 则 只 绘 
制 了 两 条 线段 ， 并 不 是 一 个 完整 的 三 角形 。 


图 17.7 绘制 三 角形 


17.2.4 ” 圆 缴 


使 用 arc0 方 法 可 以 绘制 弧 或 者 圆 ， 用 法 如 下 。 
context.arc(x, y. 1, sAngle, eAngle, counterclockwise); 


参数 说 明 如 下 。 
x: 圆心 的 x 坐标 。 
y: 圆心 的 y 坐标 。 
r: 圆 的 半径 。 
sAngle: 起 始 角 ， 以 弧度 计 。 提 示 ， 弧 的 圆 形 的 三 点 钟 位 置 是 0 度 。 
eAngle: 结束 角 ， 以 弧度 计 。 
counterclockwise: 可 选 参数 ， 定 义 绘图 方向 。false 为 顺 时 针 ， 即 默认 值 ，true 为 逆 时 针 。 
如 果 使 用 arcO 创 建 圆 ， 可 以 把 起 始 角 设 置 为 0， 结束 角 设置 为 2*Math.PI。 
【示例 1】 下 面 示例 绘制 了 12 个 不 同 的 角度 以 及 填充 的 圆 弧 。 主 要 使 用 两 个 for 循环 ， 生 成 圆 弧 
的 行列 〈x,y) 坐标 。 每 一 段 圆 弧 的 开始 都 调用 beginPath0 方 法 。 代 码 中 ， 每 个 圆 弧 的 参数 都 是 可 变 
| 的 ，(xy) 坐标 是 可 变 的 ,半径 (radius) 和 开始 角度 (startAngle) 都 是 固定 的 。 结 束 角度 (endAngle) 
| 在 第 一 列 开始 时 是 180 度 (半圆 )， 然 后 每 列 增加 90 度 。 最 后 一 列 形成 一 个 完整 的 圆 ， 效果 如 图 17.8 
| 所 示 。 
fonction drawO { 
Var canvas = document.getElementById('canvas’): 
| if (canvas.getContext) { 
| Var ctx = canvas.getContext('2d"): 
| for (vari=0:i<4:i) { 


办 办 办 国 国 提 


for (varj=0j<3;j++) { 


| ctx.beginPathO: 

| Var X=25+j*50; /11x 坐标 值 

| Vary=25+i*50: Wy 坐 标 值 

| varradius = 20: // 圆 弧 半径 

| var startAngle = 0; 1/ 开始 点 

| var endAngle = Math PI+ (Math PI*j)/2: // 结束 点 

| var anticlockwise =i%2—0 ? false : true: // 顺 时 针 或 逆 时 针 


| Ctx.arc(x, y. radius. startAngle. endAngle. anticlockwise): 
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if(>D{ 
ctx.fill0; 

9 

else { 


b 
} 


} 

} 

在 上 面 代码 中 ,，“var anticlockwise = i%2 一 0 ? false : true;” 语 句 作用 于 第 一 、 第 三 行 是 顺 时 针 的 
圆 弧 ，anticlockwise 作用 于 第 二 、 第 四 行为 着 时 针 圆 弧 。 让 语句 让 第 一 、 第 二 行 描 边 圆 弧 ， 下 面 两 行 
填充 路 径 。 

使 用 arcTo0 方 法 可 以 绘制 曲线 ， 该 方法 是 lineTo0 的 曲线 版 ， 它 能 够 创建 两 条 切线 之 间 的 弧 或 曲 
线 ， 用 法 如 下 。 

context.arcTo(x1,y1,x2,y2,7); 


参数 说 明 如 下 。 

x1: 弧 的 起 点 的 x 坐标。 
y1: 弧 的 起 点 的 y 坐 标 。 
x2: 弧 的 终点 的 x 坐 标 。 
y2: 弧 的 终点 
【 


的 了 坐标 。 
TI: 弧 的 半径 。 
示例 2】 本 例 使 用 lineTo0 和 arcTo0 方 法 绘制 直线 和 曲线 ， 然 后 连 成 圆 角 弧 线 ， 效 果 如 图 17.9 
所 示 
function drawO { ! 
Var canvas = document.getElementById('canvas'): | 
Var ctx = canvas.getContext(2d"): | 
ctxbeginpathO: | 
ctx.moveTo(20.20): / 设置 起 点 | 
ctx lineTo(100.20): // 给 制 水 平 直线 | 
ctx-arcTo(150.20.150.70.50): // 绘制 曲线 
ctx.lineTo(150.120): // 绘制 垂直 直线 
ctx.strokeO: / 开始 绘制 | 
| 
| 
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图 17.8 绘制 圆 和 弧 17.9 绘制 曲线 
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| 17.2.5 “二 次 方 曲线 

使 用 quadraticCurveTo0 方 法 可 以 绘制 二 次 方 贝 塞 尔 曲线 ， 用 法 如 下 。 
context.quadraticCurveTo(cpx.cpy.x.y): 

参数 说 明 如 下 。 
| cpx: 贝 塞 尔 控制 点 的 x 坐标 。 
回 cpy: 贝 塞 尔 控制 点 的 y 坐标。 
回 x: 结束 点 的 x 坐标。 
| 回 y: 结束 点 的 y 坐标 。 
| 二 次 方 贝 塞 尔 曲线 需要 两 个 点 。 第 一 个 点 是 用 于 二 次 贝 塞 尔 计算 中 的 控制 点 , 第 二 个 点 是 曲线 的 
| 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 最 后 一 个 点 。 如 果 路 径 不 存在 ,需要 使 用 beginPathO0 和 moveTo0 
| 方法 来 定义 开始 点 ， 演 示 说 明 如 图 17.10 所 示 。 
| 开始 点 (20,20) 结束 点 (200,20) 


控制 点 (20.100) 


图 17.10 二 次 方 贝 塞 尔 曲线 演示 示意 图 
操作 步骤 如 下 。 
(1) 确定 开始 点 ， 如 moveTo(20.20)。 
(2) 定义 控制 点 ， 如 quadraticCurveTo(20.100, x , y)。 
(3) 定义 结束 点 ， 如 quadraticCurveTo(20,100,200,20)。 
【示例 1】 下 面 示例 先 绘制 一 条 二 次 方 贝 塞 尔 曲 线 ， 再 绘制 出 其 控制 点 和 控制 线 。 


function drawO { 
Var canvas = document.getElementById(canvas'); 
| Var ctx=canvas.getContext("2d"): 
| // 下 面 开 始 绘制 二 次 方 贝 塞 尔 曲线 
| ctx.strokeStyle="dark"; 
ctx.beginPathO: 
ctx.moveTo(0.200): 
| ctx.quadraticCurveTo(75.50.300.200): 
| ctx.stroke0: 
| ctx.globalCompositeOperation="source-over": 
/ 绘制 直线 ， 表 示 曲 线 的 控制 点 和 控制 线 ， 控 制 点 坐标 即 两 直线 的 交点 (75.50) 
ctx.strokeStyle = "#ff00fP": 
| ctx.beginPath(): 
| ctx.moveTo(75.50): 
| ctx.lineTo(0.200): 
| ctx.moveTo(75.50): 
ctx.lineTo(300.200): 
ctx.strokeO: 
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在 浏览 器 中 运行 效果 如 图 17.11 所 示 ， 其 中 曲线 即 为 二 次 方 贝 塞 尔 曲线 ， 两 条 直线 为 控制 线 , 两 | 
直线 的 交点 即 曲线 的 控制 点 。 | 
【示例 2】 下 面 示例 组 合 直线 和 二 次 方 曲线 ， 封 装 了 一 个 圆 角 矩形 函数 ， 使 用 它 可 以 绘制 圆 角 矩 | 
形 图 形 ， 效 果 如 图 17.12 所 示 。 | 
具体 代码 解析 请 扫 码 学 习 。 


曲线 的 控制 点 
坐标 为 《75,50) 


图 17.11 二 次 方 贝 塞 尔 曲线 及 其 控制 点 
17.2.6 三 次 方 曲线 
使 用 bezierCurveTo() 方 法 可 以 绘制 三 次 方 贝 塞 尔 曲线 ， 用 法 如 下 。 


context.bezierCurveTo(cp1x.cp1ycp2x.cp2YX.y): 


参数 说 明 如 下 。 
cplx: 第 一 个 贝 塞 尔 控制 点 的 x 坐标 。 
cply: 第 一 个 贝 塞 尔 控 制 点 的 y 坐 标 。 
cp2x: 第 二 个 贝 塞 尔 控制 点 的 x 坐标 。 
cp2y: 第 二 个 贝 塞 尔 控 制 点 的 y 坐 标 。 
x: 结束 点 的 x 坐标。 
y: 结束 点 的 y 坐标 。 | 
三 次 方 贝 塞 尔 曲 线 需 要 3 个 点 , 前 两 个 点 是 用 于 三 次 贝 塞 尔 计算 中 的 控制 点 , 第 三 个 点 是 曲线 的 | 
结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 最 后 一 个 点 , 如 果 路 径 不 存在 , 需要 使 用 beginPathO0 和 moveTo0 | 
方法 来 定义 开始 点 ， 演 示 说 明 如 图 17.13 所 示 。 
操作 步骤 如 下 。 
(1) 确定 开始 点 ， 如 moveTo(20.20)。 
(2) 定义 第 1 个 控制 点 ， 如 bezierCurveTo(20,100,cp2x,cp2y,x,y)。 
(3) 定义 第 2 个 控制 点 ， 如 bezierCurveTo(20,100,200,100,x,y)。 
(4) 定义 结束 点 ， 如 bezierCurveTo(20.100.200,100.200.20)。 
【示例 】 下 面 示例 绘制 了 一 条 三 次 方 贝 塞 尔 曲线 ， 还 绘制 出 了 两 个 控制 点 和 两 条 控制 线 。 
function drawO { 
Var canvas = document.getElementById('canvas"): 
Var ctx = canvas.getContext("2d"); 
/ 下 面 开始 绘制 三 次 方 贝 塞 尔 曲线 
ctx.strokeStyle = "dark": 
ctx.beginPathO): 
ctx.moveTo(0.200): 


图 17.12 绘制 圆 角 矩 形 


加 图 加 罗 图 加 


.461 . 


/eitt 网 页 编程 从 入 门 到 精通 ( 币 梨 精 编 版 ) 


ctx.-bezierCurveTo(25.50.75,50.300.200): 
| ctx.stroke(); 
| ctx.globalCompositeOperation = "source-Over"; 
证 / 下 面 绘制 直线 用 于 表示 上 面 曲线 的 控制 点 和 控制 线 ， 控 制 点 坐标 为 (25.50) 和 (75.50) 
仿 六 | ctx.strokeStyle = "#ff00fP": 
ee ctx.beginPath|); 
ctx.moveTo(25.50); 
ts 
| ctx.moveTo(75.50): 
| ctx.lineTo(300.200): 
cEX.StrokeO: 
1 


| 
| 在 浏览 器 中 的 预览 效果 如 图 17.14 所 示 ， 其 中 曲线 即 为 三 次 方 贝 塞 尔 曲线 ， 两 条 直线 为 控制 线 ， 
| 两 直线 上 方 的 端点 即 为 曲线 的 控制 点 。 


唱 localhonnestthaml x 


开始 点 (20.20) 结束 点 (200.20) Ci|@locahosesihiml 女 ] 


控制 点 1 (20,100) 控制 点 2 (200,100) / 


图 17.13 三 次 方 贝 塞 尔 曲线 演示 示意 图 图 17.14 三 次 方 贝 塞 尔 曲线 


17.3 定义 样式 和 颜色 


canvas 支持 很 多 颜色 和 样式 选项 ， 如 线 型 、 渐 变 、 图 案 、 透 明度 和 阴影 。 本 节 将 介绍 样式 的 设置 
| 方法 。 


17.3.1 颜色 


使 用 fillStyle 和 strokeStyle 属性 可 以 给 图 形 上 色 。 其 中 , fillStyle 设置 图 形 的 填充 颜色 , strokeStyle 
设置 图 形 轮廓 的 颜色 。 

颜色 值 可 以 是 表示 CSS 颜色 值 的 字符 串 , 也 可 以 是 渐变 对 象 或 者 图 案 对 象 (参考 下 面 小 节 介绍 )。 
默认 情况 下 ， 线 条 和 填充 颜色 都 是 黑色 ，CSS 颜色 值 为 #000000。 
| 一 旦 设置 了 strokeStyle 或 fllStyle 的 值 ， 那 么 这 个 新 值 就 会 成 为 新 绘制 的 图 形 的 默认 值 。 如 果 要 
| 给 每 个 图 形 定义 不 同 的 颜色 ， 就 需要 重新 设置 fillStyle 或 strokeStyle 的 值 。 
【示例 1】 本 例 使 用 嵌 套 for 循环 绘制 方 格 阵列 ， 每 个 方 格 填充 不 同色 ， 效 果 如 图 17.15 所 示 。 


Var ctx = document.getElementById(canvas).getContext(2d): 

for (var i=0:i<6:i++) { 

| for (var j=0:j<6:j+) { 

| ctxfillStyle = rgb( + Math floor(255-42.5*#1) +… + Math_floor(255-42.5#j) 十 0) 
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ctx.fillRect(j*25,i*25,25,25):; 


在 嵌 套 for 结构 中 ， 使 用 变量 i 和 j 为 每 一 个 方 格 产生 唯一 的 RGB 色彩 值 ， 其 中 仅 修改 红色 和 | 全 
绿色 通道 的 值 ， 而 保持 蓝 色 通道 的 值 不 变 。 可 以 通过 修改 这 些 颜 色 通道 的 值 来 产生 各 种 各 样 的 色 板 。 
通过 增加 渐变 的 频率 ， 可 以 绘制 出 类 似 Photoshop 调 色 板 的 效果 。 | 
【示例 2】 本 示例 与 示例 1 有 点 类 似 ， 但 使 用 strokeStyle 属性 ， 画 的 不 是 方 格 ， 而 是 用 arc0 方 | 
法 画 圆 ， 效 果 如 图 17.16 所 示 。 | 
function drawO { | 
Var ctx = document.getElementById('canvas')).getContext(2d7): | 
for (vari=0:i<6:i+tH{f 
for (varj =0;j< 6;,j++) { 
ctx.strokeStyle = Tgb(0,' + Math.floor(255-42.5*1i) + "+ Math floor(255-42.51j) 士族 


ctx-beginPathO: 
ctx.arc(12.5+j*25,12.5+i*25.10,0.Math.PI*2,.true): 
ctx.stroke(); 


€ 3 GEILE 
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图 17.15 绘制 渐变 色 块 图 17.16 绘制 渐变 圆圈 
17.3.2 不 透明 度 


使 用 globalAlpha 全 局 属性 可 以 设置 绘制 图 形 的 不 透明 度 ， 男 外 也 可 以 通过 色彩 的 不 透明 度 参数 | 
来 为 图 形 设 置 不 透明 度 ， 这 种 方法 相对 于 使 用 globalAlpha 属性 来 讲 ， 会 更 灵活 些 。 

使 用 rgba0 方 法 可 以 设置 具有 不 透明 度 的 颜色 ,用 法 如 下 。 

Tgba(R.G.B.A) 


其 中 RR、G、B 将 颜色 的 红色 、 绿 色 和 蓝 色 成 分 指定 为 0 一 255 的 十 进 制 整数 ，A 把 alpha (不 透 
明 ) 成 分 指定 为 0.0 一 1.0 的 一 个 浮 点 数值 ，0.0 为 完全 透明 ，1.0 为 完全 不 透明 。 例 如 ， 可 以 用 
"rgba(255,0,0,0.5)" 表 示 半 透明 的 完全 红色 。 | 

【示例 1】 本 示例 使 用 四 色 格 作为 背景 ， 设 置 globalAlpha 为 0.2 后 ， 在 上 面 画 一 系列 半径 递增 的 | 
半 透 明 圆 ， 最 终结 果 是 一 个 径 向 渐变 效果 ， 如 图 17.17 所 示 。 贺 和 加 得 越 多 ， 原 先 所 画 的 圆 的 透明 度 | 
则 越 低 。 通 过 增加 循环 次 数 ， 画 更 多 的 圆 ， 背 景 图 的 中 心 部 分 会 完全 消失 。 | 
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和 ctx.fillStyle = #FDO'; 
会 扩 | | ctx.fillRect(0,0,75.75): 
| ctx.fillStyle = #6C0'; 
ctx.fillRect(75,0,75.75); 
ctx.fillStyle = #09F': 
| ctx filIRect(0,75.75.75): 
ctx.fillStyle = #F30'; 
ctx fillRect(75.75,75,75); 
ctx.fillStyle = #FFF'; 
// 设置 透明 度 值 
ctx.globalAlpha = 0.2: 
// 画 半 透 明 圆 
for (vari=0:;1<7:i) { 
ctx.beginPathO); 
ctx.arc(75.75.10+10*+i.0.Math PIs2.true): 
ctx.fill0; 


【示例 2】 本 例 与 示例 1 类 似 ， 不 过 不 是 画 圆 ， 而 是 画 矩 形 。 这 里 还 可 以 看 出 ，rgba() 方 法 可 以 


| 
| 分别 设 置 轮廓 和 填充 样式 ， 因 而 具有 更 好 的 可 操作 性 和 灵活 性 ， 效 果 如 图 17.18 所 示 。 
具体 代码 解析 请 扫 码 学 习 。 


Sevecore - Sc| 
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| 17.17 用 globalAlpha 设置 不 透明 度 17.18 ”用 rgba0 方 法 设置 不 透明 度 
| 


17.3.3” 实 线 


视频 讲解 1. 线 的 粗细 
| 使 用 lineWidth 属性 可 以 设置 线条 的 粗细 ， 取 值 必须 为 正 数 ， 默 认为 1.0。 
演示 示例 请 扫 码 阅读 。 
2. 端点 样式 
lineCap 属性 用 于 设置 线段 端点 的 样式 ， 包 括 3 种 样式 : butt，round 和 square， 默 认 值 为 butt。 
演示 示例 请 扫 码 阅读 。 
3. 连接 样式 
| lineJoin 属性 用 于 设置 两 条 线段 连接 处 的 样式 ， 包 括 3 种 样式 : round、bevel 和 miter， 默 认 值 为 
| miter。 演 示 示 例 请 扫 码 阅读 。 
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4. 交点 方式 


miterLimit 属性 用 于 设置 两 条 线段 连接 处 交点 的 绘制 方式 , 其 作用 是 为 斜面 的 长 度 设置 一 个 上 限 ， 
默认 为 10， 即 规定 斜面 的 长 度 不 能 超过 线条 宽度 的 10 倍 。 当 斜面 的 长 度 达到 线条 宽度 的 10 倍 时 ， 
就 会 变 为 斜 角 。 如 果 lineJoin 属性 值 为 round 或 bevel 时 ，miterLimit 属性 无 效 。 
演示 示例 请 扫 码 阅读 。 


17.3.4 虚线 线 上 阅读 


使 用 setLineDash() 方 法 和 lineDashOffset 属性 可 以 定义 虚线 样式 ,setLineDash0 方 法 接受 一 个 数组 ， 
来 指定 线段 与 间隙 的 交 蔡 ，lineDashOffset 属性 设置 起 始 偏 移 量 。 | 
【 示例】 下面 示例 绘制 一 个 矩形 虚线 框 ， 然 后 使 用 定时 器 设计 每 隔 0.5 秒 重 绘 一 次 ， 重 绘 时 改变 | 
lineDashOffset 属性 值 ， 从 而 创建 一 个 行军 蚁 的 效果 ， 效 果 如 图 17.19 所 示 。 


Var ctx = document.getElementById('canvas).getContext(2d7): 
Var offset = 0; 
function drawO { 
ctx.clearRect(0,0, canvas.width, canvas.height): 
ctx.setLineDash([4., 4]):; 
ctx.lineDashOffset = -offset: 
ctx.strokeRect(50.,50, 200, 100): 


function marchO { 
offset+t+; 
if (offset> 16) { 
offset = 0; 


} 
drawO; 
setTimeout(march., 100): 


} 
marchO: 


< 人 注意 : 在 正 浏览 器 中 ， 从 IE 11 开始 才 支 持 setLineDash() 方 法 和 lineDashOffset 属性 。 


DD lecalhostsoeoymyshe x 


© | © localhost 


17.19 ”设计 动态 虚线 框 


17.3.5 ”线性 渐变 


要 绘制 线性 渐变 ， 首 先 使 用 createLinearGradient0 方 法 创建 canvasGradient 对 象 ， 然 后 使 用 | 占 这 
addColorStop0 方 法 进行 上 色 。 Le i 
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| createLinearGradient(0 方 法 用 法 如 下 。 
| 
| context.createLinearGradient(x0.y0.x1.y1); 
人 参数 说 明 如 下 。 
到 | ”x0: 渐变 开始 点 的 x 坐标 。 
| 回 y0: 渐变 开始 点 的 y 坐标 。 
x1: 渐变 结束 点 的 x 坐标 。 
| y1: 渐变 结束 点 的 了 坐标 。 
addColorStop() 方 法 用 法 如 下 。 
gradient.addColorStop(stop.colon); 


参数 说 明 如 下 。 

stop: 介 于 0.0 一 1.0 的 值 , 表示 渐变 中 开始 与 结束 之 间 的 相对 位 置 。 渐变 起 点 的 偏 移 值 为 0， 
终点 的 偏 移 值 为 1.0。 如 果 position 值 为 0.5， 则 表示 色 标 会 出 现在 渐变 的 正中 间 。 

| color: 在 结束 位 置 显示 的 CSS 颜色 值 。 

| 【示例 】 下 面 示例 演示 如 何 绘制 线性 渐变 。 在 本 例 中 共 添 加 了 8 个 色 标 ,分 别 为 红 、 橙 、 黄 、 绿 、 

| 青 、 蓝 、 紫 、 红 ， 预 览 效果 如 图 17.20 所 示 。 


function drawO { 
Var ctx = document.getElementById(‘canvas').getContext(2d"): 

| var lingrad = ctx.createLinearGradient(0.0.0.200): 

| lingrad.addColorStop(0. #ff00007): 

| lingrad.addColorStop(1/7, #fF9900"): 
lingrad.addColorStop(2/7. #ffff007: 

| lingrad.addColorStop(3/7, #00ff00); 

| lingrad.addColorStop(4/7, #00ff): 

| lingrad.addColorStop(5/7., #0000fP): 

| 


lingrad.addColorStop(6/7. #ff00fP): 
lingrad.addColorStop(1, #ff00007): 
ctx.fillStyle = lingrad; 

| ctx.strokeStyle = lingrad; 

| ctx.fillRect(0.0.300.200): 

| 


| 

| 图 1720 绘制 线性 渐变 

| 使 用 addColorStop0 方 法 可 以 添加 多 个 色 标 ， 色 标 可 以 在 0 一 1 任意 位 置 添加 ， 例 如 ， 从 0.3 处 开 
| 始 设置 一 个 蓝 色色 标 ， 再 在 0.5 处 设置 一 个 红色 色 标 ， 则 从 0 一 0.3 处 都 会 填充 为 蓝 色 ; 从 03 一 0.5 处 
| 为 查 色 到 红色 的 渐变 ， 从 0.5~1 处 则 填充 为 红色 。 
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17.3.6” 径 向 渐变 


要 绘制 径 向 渐变 ， 首 先 需要 使 用 createRadialGradient() 方 法 创建 canvasGradient 对 象 ， 然 后 使 用 
addColorStop() 方 法 进行 上 色 。 
createRadialGradient( 方 法 的 用 法 如 下 。 


context.createRadialGradient(x0.y0.I0.X1.y1.I): 


参数 说 明 如 下 。 
x0: 渐变 的 开始 圆 的 x 坐标 。 

y0: 渐变 的 开始 圆 的 y 坐标 。 

I0: 开始 圆 的 半径 。 

x1: 渐变 的 结束 圆 的 x 坐标 。 

y1: 渐变 的 结束 圆 的 y 坐标 。 

r1: 结束 圆 的 半径 。 

【示例 】 下 面 示例 使 用 径 向 渐变 在 画布 中 央 绘 制 一 个 圆 球 形状 ， 预 览 效果 如 图 17.21 所 示 。 

function drawO { 
Var ctx = document.getElementById('canvas').getContext('2d"); 
// 创建 渐变 
var radgrad = ctx.createRadialGradient(150.100.0.150.100.100): 
Tadgrad.addColorStop(0. #A7D30C"):; 


办 办 办 办 加 


radgrad.addColorStop(0.9, #019F62'): 
radgrad.addColorStop(1, ‘reba(1.159.98.0)): 
/ 填充 渐变 色 
ctx.fillStyle = radgrad: 
ctx.fillRect(0,0,300,200); 
} 
图 17.21 绘制 径 向 渐变 
17.3.7 图 案 


使 用 createPatterm() 方 法 可 以 绘制 图 案 效 果 ， 用 法 如 下 。 
context.createPattem(image."repeatlrepeat-x|repeat-ylno-repeat"): 
参数 说 明 如 下 。 

回 image: 规定 要 使 用 的 图 片 、 画 布 或 视频 元 素 。 

回 repeat: 默认 值 。 该 模式 在 水 平和 垂直 方向 重复 。 
回 ”repeatx: 该 模式 只 在 水 平方 向 重复 。 
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= 
| repeat-y: 该 模式 只 在 垂直 方向 重复 。 
no-repeat: 该 模式 只 显示 一 次 〈 不 重复 ) 。 
创建 图 案 的 步骤 与 创建 渐变 有 些 类 似 ， 需 要 先 创建 出 一 个 pattern 对 象 ， 然 后 将 其 赋予 fillStyle 
”属性 或 strokeStyle 属性 。 
ED | 【示例 】 下 面 示例 以 一 副 png 格式 的 图 像 作为 image 对 象 用 于 创建 图 案 ， 以 平 铺 方式 同时 沿 x 轴 
与 了 轴 方 向 平 铺 。 在 浏览 器 中 的 预览 效果 如 图 17.22 所 示 。 
| factiondrawO{ 
| Var ctx = document.getElementById(canvas').getContext(2d7): 
// 创建 用 于 图 案 的 新 image 对 象 
var img = new Image(): 
| img.src = 'images/1.png': 
| img.onload = function() { 
| // 创建 图 案 
Var ptm = ctx.createPattern(img,'repeat): 
ctx.fillStyle = ptrm; 
ctx.fillRect(0.0,600.,600): 


| 
| } 
| 国有 


17.22 ”绘制 图 案 


17.3.8 ”阴影 


创建 阴影 需要 4 个 属性 ， 简 单 说 明 如 下 。 
| shadowColor: 设置 阴影 颜色 。 
shadowBlur: 设置 阴影 的 模糊 级 别 。 
shadowOffsetX: 设置 阴影 在 x 轴 的 偏 移 距 离 。 
| shadowOffsetY: 设置 阴影 在 y 轴 的 偏 移 距离 。 
| 【示例 】 下 面 示例 演示 如 何 创建 文字 阴影 效果 ， 如 图 17.23 所 示 。 
| 

function drawO { 

Var ctx = document.getElementById('‘canvas').getContext('2d"): 
| / 设置 阴影 
| ctx.shadowOffsetX = 4: 
| ctx.shadowOffsetY = 4: 
| ctx.shadowBlur =4: 
ctx.shadowColor = "rgba(0. 0. 0. 0.5)": 
// 绘制 文本 
| ctx.font = "60px Times New Roman": 
J ctx.fillStyle = "Black": 
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ctx.fillText("Canvas API". 5. 80): | 
| 
| 


EECSEEG EL 


Canvas API | Xpte 


图 17.23 为 文字 设置 阴影 效果 


17.3.9 填充 规则 


前 面 介绍 了 使 用 fl0 方 法 可 以 填充 图 形 ,该 方法 可 以 接收 两 个 值 ， 用 来 定义 填充 规则 ， 取 值 说 明 | 
如 下 。 

"nonzero": 非 零 环绕 数 规则 ， 为 默认 值 。 

"evenodd": 奇偶 规则 。 

填充 规则 根据 某 处 在 路 径 的 外 面 或 者 里 面 来 决定 该 处 是 否 被 填充 , 这 对 于 路 径 相 交 或 者 路 径 被 岩 
套 时 是 有 用 的 。 

【示例 】 下 面 示例 使 用 evenodd 规则 填充 图 形 ， 则 效果 如 图 17.24 所 示 , 默认 填充 效果 如 图 17.25 


function drawO { 
Var ctx = document.getElementById('canvas").getContext(2d"): 
ctx.beginPathO): 
ctx.arc(50. 50, 30. 0, Math.PI*2. true): 
ctx.arc(50, 50. 15. 0. Math.PI*2, true): 
ctx.fill("evenodd"): 


[Dlocalhosta080/mysite x [DD localhosts0e0/mysite x 
© | © locahost8080/myslene 安 | : © |@ localhost8080/myslte/te 人 | : 


O @ 


17.24 evenodd 规则 填充 17.25 nonzero 规则 填充 


< 抽 注意 : 正 暂 不 支持 evenodd 规则 填充 。 
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17.4 ”图形 变形 


了 | 本 节 将 介绍 如 何 对 画布 进行 操作 ， 如 何 对 画布 中 的 图 形 进行 变形 ， 以 便 设计 复杂 图 形 。 
Note | 
17.4.1 保存 和 恢复 状态 


canvas 状态 存储 在 栈 中 ， 一 个 绘画 状态 包括 两 部 分 。 
当前 应 用 的 变形 ， 如 移动 、 旋 转 和 缩放 ， 包 括 的 样式 属性 如 下 。 
strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、 
视频 讲解 | shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation。 
当前 的 裁 切 路 径 ， 参 考 17.4.2 节 介 绍 。 
使 用 save0 方 法 ， 可 以 将 当前 的 状态 推送 到 栈 中 保存 ， 使 用 restore0 方 法 可 以 将 上 一 个 保存 的 状 
态 从 栈 中 弹出 ， 恢 复 上 一 次 所 有 的 设置 。 
【示例 】 下 面 示例 先 绘制 一 个 矩形 ， 填 充 颜 色 为 #H00ff， 轮 廓 颜色 为 蓝 色 ， 然 后 保存 这 个 状态 ， 
再 绘制 另外 一 个 矩形 ， 填 充 颜色 为 #ft0000， 轮 廓 颜色 为 绿色 ， 最 后 恢复 第 一 个 矩形 的 状态 ， 并 绘制 两 
个 小 的 矩形 ， 则 其 中 一 个 矩形 填充 颜色 必 为 #ft00ff， 另 外 和 抱 形 轮廓 颜色 必 为 蓝 色 ， 因 为 此 时 已 经 恢复 
了 原来 保存 的 状态 ， 所 以 会 沿用 最 先 设 定 的 属性 值 ， 预 览 效果 如 图 17.26 所 示 。 
function drawO { 
Var ctx = document.getElementById(canvas').getContext(2d): 
/ 开始 绘制 矩形 
ctx.fillStyle = "#ff00fP";: 
| ctx.strokeStyle = "blue": 
| ctx.fillRect(20,20,100,100); 
| ctx.strokeRect(20.20.100.100): 
ctx.f10: 
ctx.stroke0: 
| // 保存 当前 canvas 状态 
| ctx.save(): 
| // 绘制 另外 一 个 矩形 
ctx.fillStyle = "#ff0000"; 
ctx.strokeStyle = "green": 
ctx.fillRect(140.20.100.100): 
ctx.strokeRect(140.20.100.100): 
ctx.fill0: 
ctx.strokeO:; 
/ 恢复 第 一 个 矩形 的 状态 
ctx.restore(): 
| / 绘制 两 个 矩形 
| ctx.fillRect(20.140.50.50): 
| ctx.strokeRect(80.140.50.50): 
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17.4.2 ”清除 画布 
使 用 clearRect(0 方 法 可 以 清除 指定 区 域内 的 所 有 图 形 ， 显 示 画 布 背景 ， 该 方法 用 法 如 下 。 
context.clearRect(x.y.width.height):; 
参数 说 明 如 下 。 
x: 要 清除 的 矩形 左上 角 的 x 坐标 。 
y: 要 清除 的 矩形 左上 角 的 y 坐标 。 
width: 要 清除 的 矩形 的 宽度 ， 以 像素 计 。 
height: 要 清除 的 矩形 的 高 度 ， 以 像素 计 。 

【 示例】 下面 示例 演示 了 如 何 使 用 clearRect(0 方 法 来 擦 除 画布 中 的 绘图 。 
<canvas id="canvas" width="300" height="200" style="border:solid 1px #999:"></canvas> 
<input name="" type="button" value=" 清 空 画 布 " onClick="clearMap0;"> 
<script> 
Var ctx = document.getElementById('canvas').getContext(2d7): 
ctx.strokeStyle="#FFOOFF": 
ctx.beginPath(); 
ctx.arc(200.150.100.-Math.PI*1/6.-Math.PI*S/6.tme): 
ctx.stroke(); 
function clearMapO { 

ctx.clearRect(0,0,300,200); 
外 
sctip> 


在 浏览 器 中 的 预览 效果 如 图 17.27 所 示 ， 先 是 在 画布 上 绘制 一 段 弧 线 。 如 果 单 击 “ 清 空 画 布 ” 按 
钮 ， 则 会 清除 这 段 弧 线 ， 如 图 17.28 所 示 。 


了 © Doecshe.. - So| ET ba - Becca - Bo| 


图 17.27 绘制 弧 线 17.28 ”清空 画布 
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17.4.3 ”移动 坐标 


在 默认 状态 下 ， 画 布 以 左上 角 〈0,0) 为 原点 作为 绘图 参考 。 使 用 translate() 方 法 可 以 移动 坐标 原 
全 六 | 点 ， 这 样 新 绘制 的 图 形 就 以 新 的 坐标 原点 为 参考 进行 绘制 ， 其 用 法 如 下 。 
有 | context.translate(dx, dy); 

参数 dx 和 dy 分 别 为 坐标 原点 沿 水 平和 垂直 两 个 方向 的 偏 移 量 ， 如 图 17.29 所 示 。 


| 
4 注意 : 在 使 用 translate0 方 法 之 前 ， 应 该 先 使 用 save() 方 法 保存 画布 的 原始 状态 。 当 需要 时 可 以 使 
| 用 restore0 方 法 恢复 原始 状态 ， 特 别 是 在 重复 绘图 时 非常 重要 。 
【 示例】 下面 示例 综合 运用 了 save0 、restore0、translate( 方 法 来 绘制 一 个 伞 状 图 形 。 

<canvas id="canvas" width="600" height="200" style="border:solid 1px #999;"></canvas> 
<script> 
drawO; 
function drawO { 

Var ctx = document.getElementById(canvas').getContext(2d): 

/ 注意 ， 所 有 的 移动 都 是 基于 这 一 上 下 文 

ctx.translate(0.80): 

for (vari=1;i<10;i) { 

ctx.save(): 
| ctx.translate(60*i, 0); 
| drawTop(ctx."reb("+(30*i)+","+(255-30*1)+",255)"): 
| drawGrip(ctx): 
ctx.restore(); 


} 


| } 

| 绘制 伴 形 顶 部 半圆 

| function drawTop(ctx. fillStyle) { 
ctx.fillStyle = fillStyle; 
ctx.beginPathO: 

| ctx.arc(0. 0. 30. 0.Math.PL.trmue): 

| ctx.closePathO): 

| ctx.fill0:; 


上 

/ 绘制 伞 形 底部 手柄 

function drawGrip(ctx) { 
ctx.save(): 
ctx.fillStyle = "blue": 
ctxfillRect(-1.5. 0. 1.5. 40): 
ctx.beginPathO: 
ctx.strokeStyle="blue": 

| ctx.arc(-5, 40. 4. Math. PL.Math.PI*2.true): 

| ctx.strokeO: 

| ctx.closePathO: 

| ctx.restore(): 

| 

| </script> 
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在 浏览 器 中 的 预览 效果 如 图 17.30 所 示 。 可 见 ，canvas 中 图 形 移动 的 实现 ， 其 实 是 通过 改变 画布 | 
的 坐标 原点 来 实现 ， 所 谓 的 “移动 图 形 ”， 只 是 “看 上 去 ”的 样子 ， 实 际 移动 的 是 坐标 空间 。 领 会 并 | 
掌握 这 种 方法 ， 对 于 随心 所 欲 地 绘制 图 形 非常 有 帮助 。 | 

(0, 0) | 


< 3 © - S veocshont sm ~ ao ET 


区 y 
图 17.29 坐标 空间 的 偏 移 示意 图 图 17.30 移动 坐标 空间 
17.4.4 ”旋转 坐标 | 
使 用 rotate0 方 法 可 以 以 原点 为 中 心 旋转 canvas 上 下 文 对 象 的 坐标 空间 ， 其 用 法 如 下 。 | 视频 讲解 
context.rotate(angle); 


rotate0 方 法 只 有 一 个 参数 , 即 旋转 角度 angle, 旋转 角度 以 顺 时 针 方向 为 正方 向 , 以 弧度 为 单位 ， 
旋转 中 心 为 canvas 的 原点 ， 如 图 17.31 所 示 。 


岩 提示 : 如 需 将 角度 转换 为 弧度 ， 可 以 使 用 degreessMath PU180 公式 进行 计算 .例如 ， 如 果 要 族 
转 5 度 ， 可 套用 这 样 的 公式 : S*Math.PI180。 

【示例 】 在 17.4.3 节 示例 的 基础 上 ， 下 面 示例 设计 在 每 次 开始 绘制 图 形 之 前 ， 先 将 坐标 空间 旋转 

PI*(2/4+i/4)， 再 将 坐标 空间 沿 y 轴 负 方向 移动 100， 然 后 开始 绘制 图 形 ， 从 而 实现 使 图 形 沿 一 中 心 点 
平均 旋转 分 布 。 在 浏览 器 中 的 预览 效果 如 图 17.32 所 示 。 


(0, 0) x | 
| 
| 

x 
| 
| 

y 
图 17.31 以 原点 为 中 心 旋转 canvas 图 17.32 旋转 坐标 空间 


function drawO { 
Var ctx = document.getElementById('‘canvas').getContext(2d"): 
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ctx.translate(150,150): 
for (vari=1;i<9: HD) { 


Ctx.save(): 

ctx.rotate(Math. PI*(2/4+i/4)): 

ctx.translate(0,—100): 
drawTop(ctx."reb("+(30*i)+","+(255-30*i)+",255)"); 
drawGrip(ctx): 

ctx.restore(); 


context.scale(x,y); 


| 

其 中 x 为 模 轴 的 缩放 因子 ，y 轴 为 纵 轴 的 缩放 因子 ， 值 必须 是 正 值 。 如 果 需 要 放大 图 形 ， 则 将 参 
| 数值 设置 为 大 于 1 的 数值 ， 如 果 需 要 缩小 图 形 ， 则 将 参数 值 设置 为 小 于 1 的 数值 ， 当 参数 值 等 于 1 时 
| 则 没有 任何 效果 。 

| 【示例 】 下 面 示例 使 用 scale(0.95,0.95) 来 缩小 图 形 到 上 次 的 0.95， 共 循环 80 次 ， 同 时 移动 和 旋 
| 转 坐 标 空间 ， 从 而 实现 图 形 呈 螺旋 状 由 大 到 小 的 变化 ， 预 览 效 果 如 图 17.33 所 示 。 


17.33 ”缩放 图 形 


function drawO { 
Var ctx = document.getElementById('canvas').getContext(2d"): 
ctx.translate(200.20): 
for (vari= 1:i1< 80; 1+H+) { 
ctx.saveO; 
ctx.translate(30.30): 
ctx.scale(0.95.0.95): 


.474 . 


第 17 章 JavaScript 固形 设 计 一 § > | 
ctx.fill0; 
} 
} 


17.4.6 ”变换 图 形 


transform0) 方 法 可 以 同时 缩放 、 旋 转 、 移 动 和 倾斜 当前 的 上 下 文 环境 ， 用 法 如 下 。 
context.transform(a.b.c.d,e.f): 


参数 说 明 如 下 。 
a: 水 平 缩放 绘图 | 
b: 水 平 倾斜 绘图 | 
c: 垂直 倾斜 绘图 | 
d: 垂直 缩放 绘图 。 | 
e: 水 平移 动 绘图 。 | 
全 垂直 移动 给 | 
次 提示 :translate(x.y) 可 以 用 下 面 的 方法 来 代替 。 | 


context.transform(0,1,1,0,dx,dy); 
或 
context.transform(1,0,0,1,dx,dy); 
其 中 dx 为 原点 沿 x 轴 移 动 的 数值 ，dy 为 原点 沿 Y 轴 移动 的 数值 。 
回 ”scale(x,y) 可 以 用 下 面 的 方法 来 代替 。 
context.transform(m11,0.0.m22,0.0): 
或 
context.transform(0,m12,m21,0,0,0); 
其 中 dx、 dy 都 为 0, 表示 坐标 原点 不 变 . mll、 m22 或 ml12、m21 为 沿 X、y 轴 放 大 的 倍数 。 
回 rotate(angle) 可 以 用 下 面 的 方法 来 代替 。 
context.transform(cos0.,sin,—sing, cos6.0.0); 
其 中 的 6 为 旋转 角度 的 弧度 值 ，dx、dy 都 为 0 表示 坐标 原点 不 变 。 | 
setTransform0 方 法 用 于 将 当前 的 变换 矩阵 进行 重 置 为 最 初 的 矩阵 ， 然 后 以 相同 的 参数 调用 | 
transform() 方 法 ， 用 法 如 下 。 | 
contextsetTransform(ml11. m12, m21. m22. dx, dy): 
【示例 】 下 面 示例 使 用 setTransfom0 方 法 将 前 面 已 经 发 生变 换 的 矩阵 首先 重 置 为 最 初 的 矩阵 ， 
即 恢复 最 初 的 原点 ， 然 后 再 将 坐标 原点 改 为 〈10,10)， 并 以 新 的 坐标 为 基准 绘制 一 个 蓝 色 的 矩形 。 
function drawO { 
Var ctx = document.getElementById('canvas").getContext(2d"): 
ctx.translate(200.20): 
for (vari= 1;i<90:iH) { 
Ctx.save(): 
ctx.transform(0.95.0.0.0.95.30.30): 
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4 ctx.globalAlpha = "0.4"; 
会 六 ctx.arc(0.0.50.0.Math PI*2,true): 
| ctx.closePathO: 


ca 


| ctx.setTransform(1.0,0,1.10,10); 

| ctx.fillStyle="blue"; 
ctx-fillRect(0.0,50,50); 

| ctx.fill0:; 

| 有 

| 在 浏览 器 中 的 预览 效果 如 图 17.34 所 示 。 在 本 例 中 , 使 用 scale(0.95,0.95) 来 缩小 图 形 到 上 次 的 0.95， 

| 共 循 环 89 次 ， 同 时 移动 和 旋转 坐标 空间 ， 从 而 实现 图 形 呈 螺旋 状 由 大 到 小 的 变化 。 


图 17.34 ”和 拢 阵 重 置 并 变换 


17.5 图形 合成 


视频 讲解 | 当 两 个 或 两 个 以 上 的 图 形 存 在 重合 区 域 时 , 默认 情况 下 一 个 图 形 画 在 前 一 个 图 形 之 上 。 通过 指定 
| 图 形 globalCompositeOperation 属性 的 值 可 以 改变 图 形 的 绘制 顺序 或 绘制 方式 , 从 而 实现 更 多 种 可 能 。 
| 【示例 】 下 面 示例 设置 所 有 图 形 的 透明 度 为 1， 即 不 透明 。 设置 globalCompositeOperation 属性 值 
| 为 source-over， 即 默认 设置 ， 新 的 图 形 会 覆盖 在 原 有 图 形 之 上 ， 也 可 以 指定 其 他 值 。 


| function drawO { 
| Var ctx = document getElementById(canvas).getContext(2d): 
| ctx.fillStyle = "red": 
ctx.fillRect(50.25.100.100): 
| ctx.fillStyle = "green 
| ctx.globalCompositeOperation = "source-Over": 
汶 ctx.beginPath(): 
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ctx.arc(150,125,50,0,Math.PI*2,true); 
ctx.closePathO: 
ctx.fill0; 


在 浏览 器 中 的 预览 效果 如 图 17.35 所 示 。 如 果 将 globalAlpha 的 值 更 改 为 0.5(ctx.globalAlpha=0.5;)， | 
则 两 个 图 形 都 会 呈现 为 半 透 明 ， 如 图 17.36 所 示 。 | 


《4 -EECSEECG 


国 

a 

图 17.35 图形 的 组 合 图 17.36 半 透 明 效果 

globalCompositeOperation 属性 所 有 可 用 值 的 说 明 请 扫 码 了 解 。 二 
17.5.2” 裁 切 


使 用 clip() 方 法 能 够 从 原始 画布 中 剪 切 任意 形状 和 尺寸 。 其 原理 与 绘制 普通 canvas 图 形 类 似 ， 只 | 
不 过 clip0 的 作用 是 形成 一 个 蒙 版 ， 没 有 被 蒙 版 的 区 域 会 被 隐藏 。 
容 提示: 一 旦 剪 切 了 某 个 区 域 ， 则 所 有 之 后 的 绘图 都 会 被 限制 在 被 剪 切 的 区 域内 ， 不 能 访问 画布 上 | 
的 其 他 区 域 。 用 户 也 可 以 在 使 用 clip0 方 法 前 ， 通 过 使 用 save() 方 法 对 当前 画布 区 域 进行 
保存 ， 并 在 以 后 的 任意 时 间 通 过 restore() 方 法 对 其 进行 恢复 。 


具体 演示 示例 请 扫 码 阅读 。 


17.6 绘制 文本 


使 用 fillText0 和 strokeText0 方 法 ， 可 以 分 别 以 填充 方式 和 轮廓 方式 绘制 文本 。 
17.6.1 填充 文字 


fillText0 方 法 能 够 在 画布 上 绘制 填 色 文本 ， 默 认 颜色 是 黑色 ， 其 用 法 如 下 。 
context.fillText(text,x,y,max Width); 

参数 说 明 如 下 。 

回 text: 规定 在 画布 上 输出 的 文本 。 

回 x: 开始 绘制 文本 的 x 坐标 位 置 〈 相 对 于 画布 ) 。 

y: 开始 绘制 文本 的 y 坐标 位 置 〈 相 对 于 画布 ) 。 

maxWidth: 可 选 。 允 许 的 最 大 文本 宽度 ， 以 像素 计 。 
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【示例 】 下 面 用 filText0 方 法 在 画布 上 绘制 文本 "Hi" 和 "Canvas API"， 效 果 如 图 17.37 所 示 。 
| 
| function drawO { 
| Var canvas = document.getElementById(Ccanvas): 
Var ctx = canvas.getContext(2d): 
ctx.font = "40px Georgia"; 


text: 规定 在 画布 上 输出 的 文本 。 

x: 开始 绘制 文本 的 x 坐标 位 置 〈 相 对 于 画布 ) 。 
y: 开始 绘制 文本 的 y 坐标 位 置 〈 相 对 于 画布 ) 。 

| maxWidth: 可 选 。 人 允许 的 最 大 文本 宽度 ， 以 像素 计 。 
| 线 上 阅读 具体 演示 示例 请 扫 码 阅读 。 


17.6.3 文本 样式 


ctx.fillText("Hi".10.50): 
ctx.font = "SOpx Verdana": 

| // 创建 渐变 

| Var gradient = ctx.cTeateLinearGradient(0.0.canvas.wWidth.0): 

| gradient.addColorStop("0"."magenta): 

| gradient.addColorStop("0.5","blue"): 

| gradient.addColorStop("1.0","red"): 

| // 用 渐变 填 色 

| ctx.fillStyle = gradient: 

| ctx.fillText("Canvas API".10.120): 

| } 

| 

| G Er 

| 

| Hi 

Canvas API 

| 

| 图 1737 绘制 填充 文字 

| 17.6.2 轮廓 文字 

| 使 用 strokeText0) 方 法 可 以 在 画布 上 绘制 描 边 文本 ， 默 认 颜色 是 黑色 ， 其 用 法 如 下 。 

context.stroke Text(text,x.y.max Width):; 

| 参数 说 明 如 下 。 

| 

| 


| 下 面 简单 介绍 文本 样式 的 相关 属性 。 
| 回 font: 定义 字体 样式 ， 语 法 与 CSS 字体 样式 相同 。 默 认 字 体 样式 为 10px sans-serif。 
| 回 textAlign: 设置 正在 绘制 的 文本 水 平 对 齐 方式 ， 取 值 说 明 如 下 。 
| > start: 默认 ， 文 本 在 指定 的 位 置 开始 。 
| > end: 文本 在 指定 的 位 置 结束 。 
| > center: 文本 的 中 心 被 放置 在 指定 的 位 置 。 
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> left: 文本 左 对 齐 。 
> right: 文本 右 对 齐 。 
textBaseline: 设置 正在 绘制 的 文本 基线 对 齐 方式 ， 即 文本 垂直 对 齐 方式 。 取 值 说 明 如 下 。 
> ”alphabetic: 默认 值 ， 文 本 基线 是 普通 的 字母 基线 。 
top: 文本 基线 是 em 方 框 的 顶端 。 
hanging: 文本 基线 是 悬挂 基线 。 
middle: 文本 基线 是 em 方 框 的 正中 。 
ideographic: 文本 基线 是 表意 基线 。 
bottom: 文本 基线 是 em 方 框 的 底 端 。 
疙 提示: 大 部 分 浏览 器 尚 不 支持 hanging 和 ideographic 属性 值 。 
direction: 设置 文本 方向 ， 取 值 说 明 如 下 。 
> ltr: 从 左 到 右 。 
> zl:， 从 右 到 左 。 
> inherit: 默认 值 ， 继 承 文本 方向 。 
具体 演示 示例 请 扫 码 阅读 。 
17.6.4 测量 宽度 
使 用 measureText0 方 法 可 以 测量 当前 所 绘制 文字 中 指定 文字 的 宽度 ， 它 返回 一 个 TextMetrics 对 | 视频 讲解 
象 ， 使 用 该 对 象 的 width 属性 可 以 得 到 指定 文字 参数 后 所 绘制 文字 的 总 宽度 ， A | 
metrics = context. measure Text(text); 


其 中 的 参数 text 为 要 绘制 的 文字 。 
具体 演示 示例 请 扫 码 阅读 。 二 上 阅读 


Vvvyvyvyv 


17.7 使 用 图 像 


在 canvas 中 可 以 导入 图 像 。 导入 的 图 像 可 以 改变 大 小 、 裁 切 或 合成 。canvas 支持 多 种 图 像 格式 ， 
如 PNG、GIF、JPEG 等 。 


17.7.1 导入 图 像 


在 canvas 中 导入 图 像 的 步骤 如 下 。 
(1) 确定 图 像 来 源 。 
(2) 使 用 drawImage() 方 法 将 图 像 绘 制 到 canvas 中 。 
确定 图 像 来 源 有 4 种 方式 ， 用 户 可 以 任 选 一 种 即 可 。 
页 面 内 的 图 片 : 如 果 已 知 图 片 元 素 的 ID， 则 可 以 通过 documentimages 集合 、document. 
getElementsByTagName() 或 document.getElementById0 等 方法 获取 页 面 内 的 该 图 片 元 素 。 
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其 他 canvas 元 素 : 可 以 通过 document.getElementsByTagName0 或 document.getElementById() 
等 方法 获取 已 经 设计 好 的 canvas 元 素 。 例 如 ， 可 以 用 这 种 方法 为 一 个 比较 大 的 canvas 生成 


缩 略 图 。 
仿 六 | 用 脚本 创建 一 个 新 的 image 对 象 : 使 用 脚本 可 以 从 零 开 始 创建 一 个 新 的 image 对 象 。 不 过 这 
| 种 方法 存在 一 个 缺点 ， 如 果 图 像 文件 来 源 于 网 络 且 较 大 ， 则 会 花费 较 长 的 时 间 来 装载 。 所 以 
如 果 不 希 望 因 为 图 像 文 件 装载 而 导致 的 漫长 的 等 待 ， 需 要 做 好 预 装载 的 工作 。 


| 回 ”使 用 datarurl 方式 引用 图 像 : 这 种 方法 允许 用 Base64 编码 的 字符 串 来 定义 一 个 图 片 , 优点 是 
图 片 可 以 即时 使 用 ， 不 必 等 待 装载 ， 而 且 迁 移 也 非常 容易 。 缺 点 是 无 法 缓存 图 像 ， 所 以 如 果 
图 片 较 大 ， 则 不 太 适 宜 用 这 种 方法 ， 因 为 这 会 导致 代入 的 url 数据 相当 庞大 。 
使 用 脚本 创建 新 image 对 象 时 ， 其 方法 如 下 所 示 。 
varimg=newJImage0:  / 创建 新 的 Image 对 象 
img.src ='imagel.png'; ”// 设置 图 像 路 径 
| 如 果 要 解决 图 片 预 装载 的 问题 ， 则 可 以 使 用 下 面 的 方法 ， 即 使 用 onload 事件 一 边 装载 图 像 ， 一 
| 边 执行 给 会 制图 像 的 函数 。 
| varimg = new Image0; ”// 创建 新 的 Image 对 象 
img.onload = fnctionO { 
/ 此 处 放置 drawImage 的 语句 
| 
eC // 设置 图 像 路 径 
不 管 采用 什么 方式 获取 图 像 来 源 , 之 后 的 工作 都 是 使 用 drawImage0 方 法 将 图 像 绘制 到 canvas 中 。 
drawImage() 方 法 能 够 在 画布 上 绘制 图 像 、 画 布 或 视频 。 该 方法 也 能 够 绘制 图 像 的 某 些 部 分 ， 以 及 增 
| 加 或 减少 图 像 的 尺寸 ， 其 用 法 如 下 。 
/ 语法 1: 在 画布 上 定位 图 像 
contextdrawImageimg xy): 
/ 语法 2: 在 画布 上 定位 图 像 ， 并 规定 图 像 的 宽度 和 高 度 
| context.drawImage(img.x.y,width,height); 
| / 语法 3: 剪 切 图 像 ， 并 在 画布 上 定位 被 剪 切 的 部 分 
| context.drawImage(img.sx.sy.swidih,sheight.xy. width. height); 
参数 说 明 如 下 。 
img: 规定 要 使 用 的 图 像 、 画 布 或 视频 。 
sx: 可 选 。 开 始 剪 切 的 x 坐标 位 置 。 
sy: 可 选 。 开 始 剪 切 的 y 坐标 位 置 。 
swidth: 可 选 。 被 剪 切 图 像 的 宽度 。 
sheight: 可 选 。 被 剪 切 图 像 的 高 度 。 
x: 在 画布 上 放置 图 像 的 x 坐标 位 置 。 
y: 在 画布 上 放置 图 像 的 y 坐标 位 置 。 
width: 可 选 。 要 使 用 的 图 像 的 宽度 。 可 以 实现 伸展 或 缩小 图 像 。 
height: 可 选 。 要 使 用 的 图 像 的 高 度 。 可 以 实现 伸展 或 缩小 图 像 。 


图 加 


办 办 


办 办 多 
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【示例 】 本 示例 演示 了 如 何 使 用 上 述 步骤 将 图 像 引 入 canvas 中 ， 预 览 效果 如 图 17.38 所 示 。 至 于 | 
第 2 种 和 第 3 种 drawImage( 方 法 ， 将 在 后 续 小 节 中 单独 介绍 。 | 


function drawO { 
Var ctx = document.getElementById('canvas').getContext(2d"): 
var img = new Image(); 
img.onload = fonctiongO { 
ctx.drawImage(img.0.0): 


} 
img.src = 'images/1.jpg’: 


17.38 向 canvas 中 导入 图 像 
17.7.2 ”缩放 图 像 


drawImage() 方 法 的 第 2 种 用 法 可 以 用 于 使 图 片 按 指定 的 大 小 显示 ， 其 用 法 如 下 。 
context.drawImage(image, x, y. width, height): 


其 中 width 和 height 分 别 是 图 像 在 canvas 中 显示 的 宽度 和 高 度 。 
【示例 】 下 面 示例 将 17.7.1 节 示 例 中 的 代码 稍 做 修改 ,设置 导入 的 图 像 放大 显示 ， 并 仅 显 示 头 部 | 
位 置 ， 效 果 如 图 17.39 所 示 。 
function drawO { 
Var ctx = document.getElementById('canvas").getContext(2d"): 
var img =new Image(); 
img.onload = function() { 
ctx.drawImage(img.-100.-40.800.500): 


img.src = "images/1.jpg': 


17.39 ”放大 图 像 显示 
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| 17.7.3 ” 裁 切 图 像 


drawImage 的 第 3 种 用 法 用 于 创建 图 像 切片 ， 其 用 法 如 下 。 
context.drawImage(image.sx.sy.sw.sh.dx.dy.dw.dh): 

其 中 image 参数 与 前 两 种 用 法 相同 ， 其 余 8 个 参数 可 以 参考 图 17.40。sx、sy 为 源 图 像 被 切割 
| 区域 的 起 始 坐标 ，sw、sh 为 源 图 像 被 切 下 来 的 宽度 和 高 度 ，dx、dy 为 被 切割 下 来 的 源 图 像 要 放置 
| 到 目标 canvas 的 起 始 坐 标 ; dw、dh 为 被 切割 下 来 的 源 图 像 放置 到 目标 canvas 的 显示 宽度 和 高 度 ， 
如 图 17.40 所 示 。 


目标 Canvas 


图 17.40 其余 8 个 参数 的 图 示 

| 【示例 】 下 面 示例 演示 如 何 创建 图 像 切 片 ， 预 览 效果 如 图 17.41 所 示 。 
| function drawO { 
| Var ctx = document.getElementById('canvas").getContext(2d"): 

Var img = new Image(); 

img.onload = fonction0 { 
| ctx.drawImage(img,70,50,100,70,5,5,290,190); 
| } 
| img.sre = ‘images/1 jpg 


17.41 创建 图 像 切 片 


图 像 平 铺 就 是 让 图 像 填 满 画 布 ， 有 两 种 方法 可 以 实现 : 一 种 是 使 用 drawImage() 
方法 另 一 种 是 使 用 createPattermn0 方 法 ， 详 细 说 明和 示例 代码 请 扫 码 阅读 。 


| 线 上 阅 读 
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17.8 像素 操作 


到 目前 为 止 ， 我 们 尚未 深入 了 解 canvas 画布 真实 像素 的 原理 ， 事 实 上 ， 用 户 可 以 直接 通过 | 


ImageData 对 象 操纵 像素 数据 ， 直 接 读 取 或 将 数据 数组 写 入 该 对 象 中 。 
17.8.1 认识 ImageData 对 象 


ImageData 对 象 表 示 图 像 数 据 ， 存 储 canvas 对 象 真实 的 像素 数据 ， 它 包含 以 下 几 个 只 读 属 性 。 

width: 返回 ImageData 对 象 的 宽度 ， 单 位 是 像素 。 

height: 返回 ImageData 对 象 的 高 度 ， 单 位 是 像素 。 

data: 返回 一 个 对 象 ， 其 包含 指定 的 ImageData 对 象 的 图 像 数 据 。 

图 像 数 据 是 一 个 数组 ， 包 含 着 RGBA 格式 的 整 型 数据 ， 范 围 为 0~255 (包括 255)， 通 过 图 像 数 
据 可 以 查看 画布 初始 像素 数据 。 每 个 像素 用 4 个 值 来 代表 ,分 别 是 红色 值 、 绿 色 值 、 蓝 色 值 和 透明 度 
值 。 对 于 透明 度 值 来 说 ，0 是 透明 的 ，255 是 完全 可 见 的 ， 数 组 格式 如 下 。 

[rl, g1, bl, al, r2, g2., b2. a2. r3, g3, b3. a3....] 


TI1、g1、bl 和 al 分 别 为 第 一 个 像素 的 红色 值 、 绿 色 值 、 蓝 色 值 和 透明 度 值 ，r2、g2、b2、a2 分 
别 为 第 二 个 像素 的 红色 值 、 绿色 值 、 蓝 色 值 、 透 明度 值 , 以 此 类 推 。 像 素 是 从 左 到 右 , 然后 自 上 而 下 ， 
使 用 data.length 可 以 遍历 整个 数组 。 


17.8.2 ”创建 图 像 数据 


使 用 createImageData0 方 法 可 以 创建 一 个 新 的 、 空 白 的 ImageData 对 象 ， 具 体 用 法 如 下 。 


/ 以 指定 的 尺寸 〈 以 像素 计 ) 创建 新 的 ImageData 对 象 

Var imgData = context.createImageData(width,height); 

/ 创建 与 指定 的 另 一 个 ImageData 对 象 尺寸 相同 的 新 ImageData 对 象 ( 不 会 复制 图 像 数据 ) 
Var imgData = context.createImageData(imageData); 

参数 说 明 如 下 。 

width: 定义 ImageData 对 象 的 宽度 ， 以 像素 计 。 

height: 定义 ImageData 对 象 的 高 度 ， 以 像素 计 。 

imageData: 指定 另 一 个 ImageData 对 象 。 

调用 该 方法 将 创建 一 个 指定 大 小 的 ImageData 对 象 ， 所 有 像素 被 预 设 为 透明 黑 。 


17.8.3 ”将 图 像 数 据 写 入 画布 


putImageData0 方 法 可 以 将 图 像 数 据 从 指定 的 ImageData 对 象 写 入 到 画布 ， 具 体 用 法 如 下 。 
context putimageData(imgData.x.y.dirtyX.dirtyY.dirtyWidth.dirtyHeigh): 

参数 说 明 如 下 。 

imgData: 要 写 入 画布 的 ImageData 对 象 。 

x: ImageData 对 象 左上 角 的 x 坐标 ， 以 像素 计 。 
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| y: ImageData 对 象 左 上 角 的 y 坐标 ， 以 像素 计 。 
| 回 dirtyX: 可 选 参数 ， 在 画布 上 放置 图 像 的 x 轴 位 置 ， 以 像素 计 。 
| dirtyY: 可 选 参数 ， 在 画布 上 放置 图 像 的 y 轴 位 置 ， 以 像素 计 。 

会 内 dirtyWidth。 可 选 参数 ， 在 画布 上 绘制 图 像 所 使 用 的 宽度 。 

| dirtyHeight， 可 选 参数 ， 在 画布 上 绘制 图 像 所 使 用 的 高 度 。 

【示例 】 下 面 示例 创建 一 个 100 像素 X100 像素 的 ImageData 对 象 ， 其 中 每 个 像素 都 是 红色 的 ， 
| 然后 把 它 写 入 画布 中 显示 出 来 。 
| <canvas id="myCanvas"></canvas> 
<script> 


| var ¢ = document.getElementById("myCanvas"); 
| Var ctx = c.getContext("2d"); 
| Var imgData = ctx.createImageData(100.100): // 创建 图 像 数据 
// 使 用 for 循环 语句 ， 逐 一 设置 图 像 数 据 中 每 个 像素 的 颜色 值 
for (vari= 0; i< imgData.data.length; i+=4) { 
imgData.data[i + 0] = 255: 
imgDatadatafi + 1] = 0: 
imgData.datali + 2] = 0: 
imgDatadatafi + 3] = 255; 


| } 
| ctx.putImageData(imgData.10.10): / 把 图 像 数 据 写 入 画布 中 
| ‘</script> 
| 
17.8.4 ”在 画布 中 复制 图 像 数 据 
视频 讲解 getImageData() 方 法 能 复制 画布 指定 矩形 的 像素 数据 ， 返 回 ImageData 对 象 ， 用 法 如 下 。 
| var imgData = context.getImageData(x.Ywidth height: 
| 
参数 说 明 如 下 。 


x: 开始 复制 的 左上 角 位 置 的 x 坐标 。 
y: 开始 复制 的 左上 角 位 置 的 y 坐标 。 
width: 将 要 复制 的 矩形 区 域 的 宽度 。 

height: 将 要 复制 的 矩形 区 域 的 高 度 。 
线 上 阅读 演示 示例 请 扫 码 阅读 。 


17.8.5 ”保存 图 片 
| HTMLCanvasElement 提供 一 个 toDataURL0O 方 法 ,使 用 它 可 以 将 画布 保存 为 图 片 ， 返回 一 个 包含 
图 片 展示 的 data URI， 具 体 用 法 如 下 。 

canvas.toDataURL(type. encoderOptions): 

参数 说 明 如 下 。 

type: 可 选 参数 ， 默 认为 image/png。 

encoderOptions: 可 选 参数 ， 默 认为 0.92。 在 指定 图 片 格式 为 image/jpeg 或 image/webp 的 情 
| 况 下 ， 可 以 设置 图 片 的 质量 ， 取 值 选择 0 一 1， 如 果 超 出 取 值 范围 ， 将 会 使 用 默认 值 。 
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次 提示 : 所 谓 data URI 是 指 目前 大 多 数 浏览 器 能 够 识别 的 一 种 base64 住 编码 的 URI， 主 要 用 于 小 | 
型 的 、 可 以 在 网 页 中 直接 嵌入 ,而 不 需要 从 外 部 文件 说 入 的 数据 ， 如 img 元 素 中 的 图 像 文件 | 
等 , 类 似 于 “data:image/png: base64, iVBORwOKGgoAAAANSUhEUgAAAAoAAAA K...etc”。 | 


目前 ， 大 多 数 现代 浏览 器 都 支持 该 功能 。 | 便 轨 
使 用 toBlob0 方 法 ， 可 以 把 画布 存储 到 Blob 对 象 中 ， 用 以 展示 canvas 上 的 图 片 ， 这 个 图 片 文件 te 
可 以 被 缓存 或 保存 到 本 地 ， 具 体 用 法 如 下 。 
Void canvas.toBlob(callback., type, encoderOptions): 
参数 callback 表示 回调 函数 ， 当 存储 成 功 时 调用 ， 可 获得 一 个 单独 的 Blob 对 象 参数 。type 和 
encoderOptions 参数 与 toDataURL0O 方 法 相同 。 
【示例 1】 下 面 示例 将 绘图 输出 到 data URL， 效 果 如 图 17.42 所 示 。 


<canvas id="myCanvas" width="400" height="200"></canvas> | 
<script type="text/JavaScript"> | 
Var canvas = document.getElementById("myCanvas"): | 
Var context = canVas.getContext('2d):; | 
context.fillStyle = "rgb(0, 0. 255)"; 
context.fillRect(0. 0, canvas.width. canvas.height): 
context.fillStyle = "rgb(255, 255, 0)"; 
context.fillRect(10. 20. 50, 50): 

window.location = canvas.toDataURL("image/jpee"): 
</script> 


【示例 2】 下 面 示例 在 页 面 中 添加 一 块 画布 ， 两 个 按钮 ， 画 布 中 显示 绘制 的 几何 图 ”国光 
形 , 单 击 “ 保 存 图 像 ” 按 钮 , 可 以 把 绘制 的 图 形 另 存 到 另 一 个 页 面 中 , 单 击 “ 下 载 图 像 ” 
按钮 ， 可 以 把 绘制 的 图 形 下 载 到 本 地 ， 演 示 效 果 如 图 17.43 所 示 。 

具体 代码 解析 请 扫 码 学 习 。 de 


DD localhostest2heml x 


© | © localhosw 


© | © dataimage/ipegtbase54/9/4AAQSkZJR9ABAQAAAQABAAD/2wEDA 从 | : 


罚 - 


人 


17.42 ”把 图 形 输出 到 data URL 17.43 ”保存 和 下 载 图 形 


17.9 Path2D 对 象 


HTML Canvas 2D API 新 增 了 一 些 新 的 功能 。 目 前 ，Chrome 37+、Firefox 31+、Opera 23+、Safari 
7+ 版 本 浏览 器 支持 或 部 分 支持 以 Path2D 对 象 为 核心 的 新 功能 。 
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17.9.1 Canvas 2D API 新 功能 
交加 


在 MDN 上 ， 已 经 对 Canvas 2D API 文档 进行 了 大 部 分 更 新 ， 以 反映 
当前 canvas 标准 和 浏览 器 的 执行 状态 。 新 增 功能 具体 说 明 请 扫 码 阅读 。 


Note | 线 上 阅 


17.9.2 使 用 Path2D 对 象 
| 加 yr | 


使 用 Path2D 对 象 的 各 种 方法 可 以 绘制 直线 、 和 矩形 、 贺 形 、 椭 圆 以 及 曲线 ， 详 
细 说 明 请 扫 码 阅读 。 


17.10 案例 实战 


本 节 将 结合 案例 介绍 Canvas API 高 级 应 用 。 
17.10.1 设计 基本 动画 


本 例 在 画布 中 绘制 一 个 红色 方块 和 一 个 圆 形 球 , 让 它们 重 每 显示 ,， 然 
后 使 用 一 个 变量 从 图 形 上 下 文 的 globalCompositeOperation 属性 的 所 有 参 
ae 数 构 成 的 数组 中 挑选 一 个 参数 来 显示 对 应 的 图 形 组 合 效果 , 通过 动画 来 循 
视频 讲解 ” 环 显 示 所 有 参数 的 组 合 效果 。 具 体 代码 和 解析 请 扫 码 学 习 。 


17.10.2 颜色 选择 器 


本 例 使 用 getImageData0 方 法 展示 鼠标 光标 移动 下 的 颜色 。 具体 代码 和 解析 请 
扫 码 学 习 。 


17.10.3 ”给 图 像 去 色 


本 例 在 17.7.4 节 示 例 基础 上 , 设计 通过 按钮 控制 图 像 的 色彩 处 理 , 当 单 击 “ 反 
色 图 像 ”按钮 时 ， 让 图 像 反 色 显 示 ; 当 单 击 “ 灰 色 图 像 ”按钮 时 ， 让 图 像 以 灰 度 
图 显示 。 有 具体 代码 和 解析 请 扫 码 学 习 。 


17.10.4 ”缩放 图 像 和 反 锯 齿 处 理 


在 drawImage0 方 法 中 ， 通过 缩放 第 二 块 画布 的 大 小 ， 可 以 实现 图 像 的 实时 
缩放 显示 ， 再 利用 画布 环境 的 imageSmoothingEnabled 属性 ， 可 以 设置 放大 显示 
的 图 像 是 否 以 反 锯齿 〈 即 平滑 方式 ) 显示 。 有 具体 代码 和 解析 请 扫 码 学 习 。 
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17.10.5 ”设计 运动 动画 
在 上 面 示例 中 ， 我 们 初步 掌握 了 基本 动画 的 设计 方法 ， 本 节 将 会 对 


运动 有 更 深 的 了 解 并 学 会 添加 一 些 符合 物理 的 运动 。 具 体操 作 步 又 请 扫 
码 学 习 。 
17.10.6 ”设计 地 球 和 月 球 公转 动画 

本 例 用 window.requestAnimationFrame() 方 法 设计 太阳 系 模拟 动画 。 这 个 方法 
提供 了 更 加 平缓 并 更 加 有 效率 的 方式 来 执行 动画 ， 当 系统 准备 好 了 重 绘 条 件 时 ， 


才 调 用 绘制 动画 帧 。 一 般 每 秒 钟 回调 函数 执行 60 次 ， 也 有 可 能 会 被 降低 。 具 体 代 
码 和 解析 请 扫 码 学 习 。 
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HTMLS 新 增 FileReader API 和 FileSystem API。 其 中 FileReader API 负责 读 取 文件 内 容 ， 
FileSystem API 负责 本 地 文件 系统 的 有 限 操 作 。 另 外 ,HTML5 增强 了 HTML4 的 文件 域 功 能 ， 
多 许 提交 多 个 文件 ， 本 章 将 围绕 这 些 API， 详 细 介 绍 HTML5 的 本 地 文件 操作 功能 。 


【学 习 重 点 】 


ml 


吾 吾 至 至 


使 用 FileList 对 象 

使 用 Blob 对 象 

使 用 FileReader 对 象 

使 用 ArrayBuffer 对 象 和 ArrayBufferView 对 象 
使 用 FileSystem API。 
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18.1 FileList 


HTML5 在 HIML4 文件 域 基础 上 为 File 控件 新 添 multiple 属性 ， 人 允许 用 户 在 一 个 File 控件 内 选 | 医 疝 
择 和 提交 多 个 文件 。 
【示例 1】 下 面 示例 设计 在 文档 中 插入 一 个 文件 域 ， 允 许 用户 同 时 提交 多 个 文件 。 
<input type="file" multiple> 
为 了 方便 用 户 在 脚本 中 访问 这 些 将 要 提交 的 文件 ，HTMLS5 新 增 了 FileList 和 File 对 象 。 
FileList: 表示 用 户 选择 的 文件 列表 。 
File: 表示 File 控件 内 的 每 一 个 被 选择 的 文件 对 象 。FileList 对 象 为 这 些 File 对 象 的 列表 , 代 | 
表 用 户 选择 的 所 有 文件 。 | 
【示例 2】 下 面 示例 演示 了 如 何 使 用 FileList 和 File 对 象 访问 用 户 提交 的 文件 名 称 列表 ， 演 示 效 | 
果 如 图 18.1 所 示 。 | 
| 


<script> 
finction ShowFileNameOf 
// document.getElementById("file").files 返回 FileList 对 象 
for (var i= 0; i < document.getElementById("file") files Jength: i++) { 
var file = document.getElementById("file").files[i]; ”// 获取 每 个 选择 的 File 对 象 
console.log(file.name): // 在 控制 台 显示 每 个 文件 的 名 称 
} 
yD 
</script> 
<input type="file" id="file" multiple> 
<input type="button" onclick="ShowFileName():" value=" 文 件 上 传 "> 


| +)- SB hapyiocho- - ac| Socahost 
测 丙 | | 文件 上 伟 


文件 (有 ] ”查找 (N) 禁用 (S) 查看 (V) 图 你) 放 存 (C) 工具 (T) 
济 淹 器 借 式 IE10(B) 文档 模式 (IM: 标准 一 中 x 


| 和 0 刷新 此 页 DJ 查看 F12 工具 打开 前 可 能 已 出 现 的 消息 . 
1.jpg 
2.jpe 


文件 名 (N}: | "1jpg" "2jpg” 图 片 (gif"jpg'"jpeg'"png) ~ 
FO) Wm > 
(a) 选择 多 个 文件 (b) 在 控制 台 显示 提示 信息 
18.1 使 用 FileList 和 File 对 象 获取 提交 文件 信息 


安 提示 : File 对 象 包含 两 个 属性 : name 属性 表示 文件 名 ， 但 不 包括 路 径 ; lastModifiedDate 属性 表 
示 文 件 的 最 后 修改 日 期 。 
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18.2 Blob 


医 疝 | HTMLS5 的 Blob 对 象 用 于 存储 二 进 制 数据 ， 还 可 以 设置 存储 数据 的 MINE 类 型 ， 其 他 HIML5 二 


进 制 对 象 继 承 Blob 对 象 。 


| 18.2.1 访问 Blob 


Blob 对 象 包含 两 个 属性 。 

size: 表示 一 个 Blob 对 象 的 字 节 长 度 。 

type: 表示 Blob 的 MIME 类 型 ， 如 果 为 未 知 类 型 ， 则 返回 一 个 空 字符 串 。 

| 【示例 1】 下 面 示例 演示 了 如 何 获取 文件 域 中 第 一 个 文件 的 Blob 对 象 ， 并 访问 该 文件 的 长 度 和 
| 文件 类 型 ， 演 示 效 果 如 图 18.2 所 示 。 


| <scrip> 
| function ShowFileTypeO{ 
| var file = document.getElementById("file").files[0]: / 获取 用 户 选择 的 第 一 个 文件 
consolelog(file .size): / 显示 文件 字 节 长 度 
consolelog(file type): // 显示 文件 类 型 
} 
</script> 
<input type="file" id="file" multiple> 


<input type="button" onclick="ShowFileType0:" value=" 文 件 上 传 "/> 


| 

| 

| 

| 

| 

| 

| 

| Se Ep 
| : 

| CAWUsersiaPictures\ 了 | 浏览 文件 上 传 
| 

| 

| 

| 


文 习 由本 HI 扫 用 65) 查看 医 估 中 各 让 (Q 工 具 ( 六 区) 
名 检 区 IE10(B) 文才 模式 Mk 时间 一 中 xX 


图 18.2 在 控制 台 显示 第 一 个 选取 文件 的 大 小 和 类 型 


| 

| < 注意 : 对 于 图 像 类 型 的 文件 ，Blob 对 象 的 type 属性 都 是 以 “image/” 开 头 的 , 后 面 是 图 像 类 型 。 
【示例 2】 下 面 示例 利用 Blob 的 type 属性 ， 判 断 用 户 选择 的 文件 是 否 为 图 像 文 件 。 如 果 在 批量 
| 上传 时 只 允许 上 传 图 像 文 件 ， 可 以 检测 每 个 文件 的 type 属性 值 ， 当 提交 非 图 像 文件 时 ， 弹 出 错误 提 
| 示 信 息 ， 并 停止 后 面 的 文件 上 传 ， 或 者 跳 过 不 上 传 该 文件 ， 演 示 效 果 如 图 18.3 所 示 。 


for (vari= 0:i < document.getElementById("file").files.length: i++) { 
| file = document.getElementById("file").files[i]: 
| if (VimageV\w+/.test(file.type)) { 
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alert(file name+" 不 是 图 像 文件 ! 7): 
continue: 


/ 此 处 加 入 文件 上 传 的 代码 
alert(file.name+" 文 件 已 上 传 "): 


} 
) 
</script> 
<input type="file" id="file" multiple> 
<input type="button" onclick="fileUpload0:" value=" 文 件 上 传 "/> 


+ 


站 ma 旬 


[8 wee - 3c] 


CAUsersiSiPictures\ijpgj 测 痪 ”|| 文件 上 传 | 


A 


RIN esto “tip “2jpe” 


| 
(a) 提交 多 个 文件 (b) 错误 提示 信息 | 

图 18.3 ”对 用 户 提交 文件 进行 过 滤 | 

【拓展 】 | 
HTML5 为 file 控件 新 添加 accept 属性 ， 设 置 file 控件 只 能 接受 某 种 类 型 的 文件 。 目 前 主流 浏览 

器 对 其 支持 还 不 统一 、 不 规范 ， 部 分 浏览 器 仅 限于 打开 文件 选择 窗口 时 ， 默 认 选择 文件 类 型 。 | 
<input type="file" id="file" accept="image/*" /> | 


18.2.2 创建 Blob 


创建 Blob 对 象 的 基本 方法 如 下 。 

Var blob = new Blob(blobParts. type): 

参数 说 明 如 下 。 | 
blobParts: 可 选 参数 ， 数 组 类 型 ， 其 中 可 以 存放 任意 个 以 下 类 型 的 对 象 ， 这 些 对 象 中 所 携带 | 

的 数据 将 被 依 序 追加 到 Blob 对 象 中 。 | 

ArrayBuffer 对 象 。 

ArrayBufferView 对 象 。 

Blob 对 象 。 | 

String 对 象 。 | 

type: 可 选 参数 ， 字 符 串 型 ， 设 置 被 创建 的 Blob 对 象 的 type 属性 值 ， 即 定义 Blob 对 象 的 | 

MIME 类 型 。 默 认 参 数值 为 空 字符 串 ， 表 示 未 知 类 型 。 


容 提示 : 当 创 建 Blob 对 象 时 ， 可 以 使 用 两 个 可 选 参数 。 如 果 不 使 用 任何 参数 ， 创 建 的 Blob 对 象 的 


size 属性 值 为 0， 即 Blob 对 象 的 字 节 长 度 为 0， 代码 如 下 。 
varblob = new Blob0: 


加 


办 办 办 办 
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| 【示例 1】 下 面 代码 演示 了 如 何 设置 第 一 个 参数 。 


| 
varblob =new Blob(["4234" + "5678"]): 
| var shorts = new Uint16Array(buffer. 622. 128): 


食 和 | var blobA = new Blob([blob. shorts]): 
| var bytes = new Uint8Array(buffer, shorts.byteOffset + shorts.byteLength): 
var blobB =new Blob([blob, blobA, bytes]) 
var blobC = new Blob([buffer, blob, blobA, bytes]): 


| 
< 注意 : 上 面 代码 用 到 了 ArrayBuffer 对 象 和 ArrayBufferView 对 象 ， 后 面 将 详细 介绍 这 两 个 对 象 。 
| 【示例 2】 下 面 代码 演示 了 如 何 设置 第 二 个 参数 。 


| 
| var blob = new Blob(["4234" + "5678"], {type: "text/plain"}): 
| Var blob = new Blob(["4234" + "5678"], {type: "text/plain; charset=UTF-8"}); 


疱 提示 : 为 了 安全 起 见 ， 在 创建 Blob 对 象 之 前 ， 可 以 先 检测 一 下 浏览 器 是 否 支持 Blob 对 象 。 
为 了 安全 起 见 ， 在 创建 Blob 对 象 之 前 ， 可 以 先 检测 一 下 浏览 器 是 否 支持 Blob 对 象 。 


这 !windowBlob) 
alert ("您 的 浏览 器 不 支持 Blbo 对 象 。 
else 
Var blob = new Blob(["4234" + "5678"], {type: "text/plain"}):; 


| 
| 目前， 各 主流 浏览 器 的 最 新 版 本 都 支持 Blob 对 象 。 
【示例 3】 下 面 示例 完整 地 演示 了 如 何 创建 一 个 Blob 对 象 。 

| 在 页 面 中 设计 一 个 文本 区 域 和 一 个 按钮 ， 当 在 文本 框 中 输入 文字 ， 然 后 单 击 “ 创 建 Blob 对 象 ” 
| 按钮 后 ，JavaSeript 脚本 根据 用 户 输入 文字 创建 二 进 制 对 象 ， 再 根据 该 二 进 制 对 象 中 的 内 容 创 建 URL 
| 地 址 ， 最 后 在 页 面 底部 动态 添加 一 个 “Blob 对 象 文件 下 载 ” 链 接 ， 单 击 该 链接 可 以 下 载 新 创建 的 文 
| 件 ， 使 用 文本 文件 打开 ， 其 内 容 为 用 户 在 文本 框 中 输入 的 文字 ， 如 图 18.4 所 示 。 
| <script> 
function testO { 

Var text = document.getElementById("textarea").value: 

Var result = document.getElementById("result"): 

// 创建 Blob 对 象 

if(!window.Blob) 

TesultinnerHTML = "浏览 器 不 支持 Blob 对 象 。"; 
| else 
| var blob = new Blob([text): /Blob 中 数据 为 文字 时 默认 使 用 utf8 格式 
| // 通过 createObjectURL 方法 创建 文字 链接 
让 (windowURIL) { 
TesultinnerHTML = '<a download hre=" +window.URL .createObjectURL(blob) 
+" target=”blank">Blob 对 象 文件 下 载 </a>'; 


| } 
| } 

| </scrip> 

<textarea id="textarea"></textarea><br /> 

<button onclick="testO"> 创 建 Blob 对 象 <button> 
| <p id="result"></p> 
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D localhostsceo/mys x 全 
C | © localhosta080/mysite 


订 而 明月 光 ， 短 是 寺 上 条 = 


大 头 望 明月， 攻 头 时 其 多 5 | 食 扩 | 

EEC | | 
Le | Note 
Bob 对 银 文 件 下 载 


(a) 创建 Blob 文件 Cb) 查看 文件 信息 
图 18.4 创建 和 查看 Blob 文件 信息 
在 动态 生成 的 <a> 标 签 中 包含 download 属性 ， 它 设置 超 链接 为 文件 下 载 类 型 。 
【拓展 】 
HTML5 支持 URL 对 象 , 通过 该 对 象 的 createObjectURL 方法 可 以 根据 一 个 Blob 对 象 的 二 进 制 数 | 
据 创建 一 个 URL 地 址 ， 并 返回 该 地 址 ， 当 用 户 访问 该 URL 地 址 时 ， 可 以 直接 下 载 原始 二 进 制 数据 。| 


18.2.3 截取 Blob 


Blob 对 象 包含 slice0 方 法 ， 它 可 以 从 Blob 对 象 中 截取 一 部 分 数据 ， 然 后 将 这 些 数据 创建 为 一 个 | 
新 的 Blob 对 象 并 返回 ， 用 法 如 下 。 
varnewBlob = blob.slice(start, end contentType): | 
参数 说 明 如 下 。 
start: 可 选 参数 ， 整 数值 ， 设 置 起 始 位 置 。 
> ”如 果 值 为 0 时 ， 表 示 从 第 一 个 字 节 开始 复制 数据 。 
> ”如 果 值 为 负数 ， 且 Blob 对 象 的 size 属性 值 +start 参数 值 大 于 等 于 0， 则 起 始 位 置 为 Blob 
对 象 的 size 属性 值 +start 参数 值 。 
> ”如 果 值 为 负数 ， 且 Blob 对 象 的 size 属性 值 +start 参数 值 小 于 0， 则 起 始 位 置 为 Blob 对 
象 的 起 点 位 置 。 
> ”如 果 值 为 正 数 ， 且 大 于 等 于 Blob 对 象 的 size 属性 值 ， 则 起 始 位 置 为 Blob 对 象 的 size 
属性 值 。 
> ”如 果 值 为 正 数 ， 且 小 于 Blob 对 象 的 size 属性 值 ， 则 起 始 位 置 为 start 参数 值 。 
回 end: 可 选 参数 ， 整 数值 ， 设 置 终 点 位 置 。 
> ”如 果 忽 略 该 参数 ， 则 终点 位 置 为 Blob 对 象 的 结束 位 置 。 
> ”如 果 值 为 负数 ， 且 Blob 对 象 的 size 属性 值 +end 参数 值 大 于 等 于 0， 则 终点 位 置 为 Blob 
对 象 的 size 属性 值 +end 参数 值 。 
> ”如 果 值 为 负数 ， 且 Blob 对 象 的 size 属性 值 +end 参数 值 小 于 0， 则 终点 位 置 为 Blob 对 象 
的 起 始 位 置 。 
> ”如 果 值 为 正 数 ， 且 大 于 等 于 Blob 对 象 的 size 属性 值 ， 则 终点 位 置 为 Blob 对 象 的 size 
属性 值 。 
> ”如 果 值 为 正 数 ， 且 小 于 Blob 对 象 的 size 属性 值 ， 则 终点 位 置 为 end 参数 值 。 
contentType: 可 选 参数 ， 字 符 串 值 ， 指 定 新 建 Blob 对 象 的 MIME 类 型 。 
如 果 slice0 方 法 的 3 个 参数 均 省 略 ,相当 于 把 一 个 Blob 对 象 原样 复制 到 一 个 新 建 的 Blob 对 象 中 。 
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电 始 位 置 小 于 终点 位 置 时 ，slice0 方 法 复制 从 终点 位 置 开始 到 起 始 位 置 结束 这 一 范围 中 的 数据 。 新 
的 Blob 对 象 的 size 属性 值 为 复制 范围 的 长 度 ， 单 位 为 byte。 
天 站 | 【示例 】 下 面 示例 演示 了 Blob 对 象 的 slice 方法 应 用 。 


| 当 
当 
建 


| <input type="file" id="file" multiple> 
<input type="button" onclick="ShowFileType0:" value=" 文 件 上 传 "/> 


| <script> 

| var file = document.getElementById("file").files[O0]; 

| if(file) { 
var filel = file.sliceO: // 复制 File 对 象 
var file2 = file.slice(0.file.size): // 复制 File 对 象 


| 

| var file3 =file.slice(-(Mathround(file.size/2))); 。 ”// 复制 File 对 象 的 后 半 部 分 

| var file4 = file.slice(0, Math round(file.size/2)); // 复制 File 对 象 的 前 半 部 分 
// 复制 File 对 象 ， 从 开始 处 复制 到 结束 处 之 前 的 150 个 字 节 处 ， 并 设置 MIME 类 型 
var files = file.slice(0,—150, "application/plain"); 


18.2.4 保存 Blob 


HTML5 支持 在 indexedDB 数据 库 中 保存 Blob 对 象 。 
| 兰 提示 : 目前 Chrome 37+、Firefox 17+、IE 10+ 和 Opera 24+ 支 持 该 功能 。 


【示例 】 下 面 示例 设计 在 页 面 中 显示 一 个 文件 控件 和 一 个 按钮 ， 通 过 文件 控件 选取 文件 后 ， 单 击 

| “保存 文件 ”按钮 ，Javaseript 脚本 将 把 用 户 选取 的 文件 保存 到 indexedDB 数据 库 中 。 
| <input type="file" id="file" multiple> 
| <input type="button" onclick="saveFile0:" value=" 保 存 文件 "> 

<script> 

window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB 
| || window.msIndexedDB: 
| window.IDB Transaction = window.IDB Transaction || window.webkitIDB Transaction || window.msIDBTransaction: 
| window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || windowmsIDBKeyRange: 
window.IDBCursor = windowIDBCursor || window.webkitIDBCursor || window.msIDBCursor: 


Var dbName = 'test' / 数据 库 名 
var dbVersion = 20170202: // 版 本 号 
var idb; 


var dbConnect = indexedDB.open(dbName. dbVersion): 
dbConnect.onsuccess = function(e) {idb = e.target.result: } 
dbConnect.onerror = function() falert( 数 据 库 连接 失败 7: }; 
dbConnect.onupgradeneeded = function(e) { 

| idb = .target.result:; 

| idb.createObjectStore('files): 

| 下 
| function saveFileO { 

| var file = document.getElementById("file").files[0]: / 得 到 用 户 选 择 的 第 一 个 文件 
| var tx = idb.transaction(['files'],"readwrite"): // 开启 事务 

Var store = tx.objectStore('files’): 
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Var req = store.put(file,'blob’); 
Teq.onsuccess = function(e) {alert(" 文 件 保存 成 功 "):}: 
Teq.onerror = function(e) {alert(" 文 件 保存 失败 "):}: 


} 

</script> | 

在 浏览 器 中 预览 ， 页 面 中 显示 一 个 文件 控件 和 一 个 按钮 ， 通 过 文件 控件 选取 文件 ， 然 后 单 击 “ 保 ， 
存 文件 ”按钮 ，JavaScript 将 把 用 户 选取 文件 保存 到 indexedDB 数据 库 中 ， 保 存 成 功 后 弹出 提示 对 话 
框 ， 如 图 18.5 所 示 。 


四 - = | 
[Dlocalhosea0a0/maite x D eaveraosamaie x | 
© | © localhosta0e0/my ml 全 | 3 © [© localhosta0e0/myshe/testl htm 全 |]: | 
鞍 吉 交 析 ]1jpg jpg [CE | 
| 
localhosti8080 号 示 ! 

wa 

Mtr 
-二 


(a) 选择 文件 (b) 保存 文件 
图 18.5 保存 Blob 对 象 应 用 


18.3 FileReader 


FileReader 能 够 把 文件 读 入 内 存 ， 并 且 读 取 文 件 中 的 数据 。 目 前 , Firefox 3.6+、Chrome 6+、Safari 
5.2+、Opera 11+ 和 IE 10+ 版 本 浏览 器 都 支持 FileReader 对 象 。 


18.3.1 ” 读 取 文件 


使 用 FileReader 对 象 之 前 ， 需 要 实例 化 FileReader 类 型 ， 代 码 如 下 。 

让 (typeofFileReader 一 "undefined") falert(" 当 前 浏览 器 不 支持 FileReader 对 象 "):} 

else {var reader = new FileReaderO:} 

FileReader 对 象 包含 5 个 方法 ， 其 中 4 个 用 以 读 取 文件 ， 另 一 个 用 来 中 断 读 取 操作 。 | 

readAsText(Blob, type): 将 Blob 对 象 或 文件 中 的 数据 读 取 为 文本 数据 。 该 方法 包含 两 个 参数 ， | 
其 中 第 二 个 参数 是 文本 的 编码 方式 ， 默 认 值 为 UTF-8。 | 

readAsBinaryString(Blob): 将 Blob 对 象 或 文件 中 的 数据 读 取 为 二 进 制 字符 串 。 通 常 调用 该 方 | 
法 将 文件 提交 到 服务 器 端 ， 服 务 器 端 可 以 通过 这 段 字符 串 存 储 文件 。 

readAsDataURL(Blob): 将 Blob 对 象 或 文件 中 的 数据 读 取 为 DataURL 字符 串 。 该 方法 就 是 

将 数据 以 一 种 特殊 格式 的 URL 地 址 形式 直接 读 入 页 面 。 

readAsArrayBuffer(Blob): 将 Blob 对 象 或 文件 中 的 数据 读 取 为 一 个 ArrayBuffer 对 象 。 
abort0: 不 包含 参数 ， 中 断 读 取 操 作 。 

< 注意 : 上 述 4 个 方法 都 包含 一 个 Blob 对 象 或 File 对 象 参数 ， 无 论 读 取 成 功 或 失败 ， 都 不 会 返回 

读 取 结 果 ， 读 取 结 果 存 储 在 result 属性 中 。 


加 
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[> 
Ch 
【示例 】 下 面 示例 演示 如 何在 网 页 中 读 取 并 显示 图 像 文件 、 文 本 文件 和 二 进 制 代码 文件 。 
<script> 


window.onload = fonction0O { 
Var result = document.getElementById("result"); 
var file = document.getElementById("file"): 
if (typeof FileReader 一 ndefined) { 
result.innerHTML = "<h1> 当 前 浏览 器 不 支持 FileReader 对 象 </h1>"; 
file.setAttribute('disabled', 'disabled"): 
Bb 
} 
function readAsDataURLO { // 将 文件 以 Data URL 形式 进行 读 入 页 面 
var file = document.getElementById("file").files[0]: / 检查 是 否 为 图 像 文件 
if (WVimageV\w+/.test(file.type)) { 
alert(" 提 交 文 件 不 是 图 像 类 型 "); 
Teturn false; 
} 
var reader = new FileReader(); 
Teader.read AsDataURL(file); 
reader.onload = function(e) { 
result.innerHTML = '<img src="+this.result+" alt=""/>" 
} 
function readAsBinaryStringO { 1/ 将 文件 以 二 进 制 形式 进行 读 入 页 面 
var file = document.getElementById("file").files[0]: 
Var reader = new FileReader(): 
TeaderreadAsBinaryString(file): 
Teaderonload = function(f) { 
result.innerHTML = this.result; 
} 
E 
function readAsText() { // 将 文件 以 文本 形式 进行 读 入 页 面 
var file = document.getElementById("file").files[0]: 
var reader = new FileReader0: 
Treader.readAsText(file): 
Treader.onload = function(f) { 
result.innerHTML = this.result: 
} 
} 
</script> 
<input type="file" id="file" /> 
<input type="button" value=" 读 取 图 像 " onclick="readAsDataURLO"/> 
<input type="button" value=" 读 取 二 进 制 数据 " onclick="readAsBinaryString0"/> 
<input type="button" value=" 读 取 文本 文件 " onclick="readAsText0"/> 
<div name="result" id="result"></div> 


在 Firefox 浏览 器 中 预览 ， 使 用 file 控件 选择 一 个 图 像 文件 ， 然 后 单 击 “ 读 取 图 像 ”按钮 ， 显 示 


效果 如 图 18.6 所 示 ; 重新 使 用 file 控件 选择 一 个 二 进 制 文件 ， 然 后 单 击 “ 读 取 二 进 制 数 据 ” 按 钮 ， 显 
示 效 果 如 图 18.7 所 示 ; 最 后 选择 文本 文件 ， 单 击 “ 读 取 文 本 文件 ”按钮 ， 显 示 效 果 如 图 18.8 所 示 。 
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图 18.6 读 取 图 像 文件 图 18.7 读 取 二 进 制 文件 


hapylocalho_itaftestlhtml X 
ne ELEE3IEEEZ 4 w 三 


起 取 二 志 抽 于 玛 | 起 取 文 可 文件 


这 取 图 从 
Fn 地上， 举 头 望 明月 ， 低 头 思 故 多 。 


图 18.8 读 取 文 本 文件 


上 面 示例 演示 如 何 读 显 文件 ,用 户 也 可 以 选择 不 显示 ,直接 提交 给 服务 器 ， 然 后 保存 到 文件 或 数 


据 库 中 。 注 意 ，fileReader 对 象 读 取 的 数据 都 保存 在 result 属性 中 。 
18.3.2 事件 监测 


FileReader 对 象 提 供 6 个 事件 ， 用 于 监测 文件 读 取 状 态 ， 简 单 说 明 如 下 。 
onabort: 数据 读 取 中 断 时 触发 。 

onprogress: 数据 读 取 中 触发 。 

onerror: 数据 读 取出 错时 触发 。 

onload: 数据 读 取 成 功 完成 时 触发 。 

onloadstart: 数据 开始 读 取 时 触发 。 

onloadend: 数据 读 取 完成 时 触发 ， 无 论 成 功 或 失败 。 


办 办 办 多国 提 


【示例 】 下 面 示例 设计 当 使 用 fileReader 对 象 读 取 文件 时 ， 会 发 生 一 系列 事件 ， 


读 取 状态 的 先后 顺序 ， 演 示 如 图 18.9 所 示 。 


if (typeof FileReader — "undefined') { 
result.innerHTML = "<h1> 当 前 浏览 器 不 支持 FileReader 对 象 <h1>"; 
file.setAttribute('disabled', 'disabled"): 
} 
中 
function readFileO { 
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Var file = document.getElementById("file").files[0]: 
| Var reader = new FileReader0: 
| reader.onload = function(e) { 
| TesultinnerHTML = '<img src=""+this.result+" alt=""/>" 


仿 F | consolelog("load"): 
Se } 
Teaderonprogress = function(e) {console.log("progress"):} 


Teader.onabort = function(e) {console.log("abort"):} 

| Teader.onerror = function(e) {fconsolelog("error):} 
Teader.onloadstart = function(e) {console.log("loadstart"):} 
Teaderonloadend = function(e) {console.log("loadend"): } 
Teader.readAsDataURL(file): 


</script> 

<input type="file" id="file" /> 

<input type="button" value=" 显 示 图 像 " onclick="readFile0" /> 
<div name="result" id="result"></div> 


18.9 ”跟踪 读 取 操作 


在 上 面 示例 中 ， 当 单 击 “ 显 示 图 像 ”按钮 后 ， 将 在 页 面 中 读 入 一 个 图 像 文 件 ， 同 时 在 控制 台 可 以 
| 看 到 按 顺 序 触发 的 事件 。 用 户 还 可 以 在 onprogress 事件 中 使 用 HTMLS5 新 增 元 素 progress 显示 文件 的 
| 读 取 进度 。 


18.4 ArrayBuffer 和 ArrayBufferView 


| HTMLS5 新 增 ArrayBuffer 对 象 和 ArrayBufferView 对 象 。ArrayBuffer 对 象 表示 一 个 固定 长 度 的 缓 
| 存 区 ， 用 来 存储 文件 或 网 络 大 数据 ，ArrayBufferView 对 象 表示 将 缓存 区 中 的 数据 转换 为 各 种 类 型 的 
| 数值 数组 。 

| 

| < 负 注 意 : HTML5 不 允许 直接 对 ArrayBuffer 对 象 内 的 数据 进行 操作 ， 需 要 使 用 ArrayBufferView 对 
| 象 来 读 写 ArrayBuffer 对 象 中 的 内 容 。 
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18.4.1 使 用 ArrayBuffer 
ArrayBuffer 对 象 表示 一 个 固定 长 度 的 存储 二 进 制 数据 的 缓存 区 。 用 户 不 能 直接 存 取 ArrayBuffer | 
缓存 区 中 的 内 容 ， 必 须 通过 ArrayBufferView 对 象 来 读 写 ArrayBuffer 缓存 区 中 的 内 容 。ArrayBuffer | 


对 象 包含 length 属性 ， 该 属性 值 表示 缓存 区 的 长 度 。 
创建 ArrayBuffer 对 象 的 方法 如 下 。 


varbuffer= new ArrayBuffer(32): 


参数 为 一 个 无 符号 长 整 型 的 整数 , 用 于 设置 缓存 区 的 长 度 ,单位 为 byte。ArrayBuffer 缓存 区 创建 
成 功 之 后 ， 该 缓存 区 内 存储 数据 初始 化 为 0。 


岩 提示 :目前 ,Firefox 4+、Opera 11.6+、Chrome 7+、Safari 5.1+.IE 10+ 等 版 本 浏览 器 支持 ArrayBuffer | 
对 象 。 | 


18.4.2 ”使 用 ArrayBufferView 


HTML5 使 用 ArrayBufferView 对 象 以 一 种 标准 格式 来 表示 ArrayBuffer 缓存 区 中 的 数据 。 HTML5 | 
不 允许 直接 使 用 ArrayBufferView 对 象 ， 而 是 使 用 ArrayBufferView 的 子 类 实例 来 存 取 ArrayBuffer 组 
存 区 中 的 数据 ， 各 种 子 类 说 明 如 表 18.1 所 示 。 


表 18.1 ArrayBufferView 的 子 类 


isam | | 5 位 尊 数 数组 
Uint8Arra | 8 位 无 符号 整数 数组 | 
Uint8ClampedAra [| | 8 位 无 符号 整数 数组 | 
Intl6Arra 16 位 整数 数组 | 
Uint I6Amra 16 位 无 符号 整数 数组 | 
Int32Ama ie | 32 位 整数 数组 | 
Uint32Ama | | 32 位 无 符号 整数 数组 | 
Float32Arra [| | 32 位 IEEE 浮 点 数 数组 

Float64Arra | ss | 64 位 IEEE 浮 点 数 数组 


容 提示 : Uint8ClampedArray 子 类 用 于 定义 一 种 特殊 的 8 位 无 符号 整数 数组 ， 该 数组 的 作用 : 代替 
CanvasPixelArray 数组 用 于 Canvas API 中 . 


该 数组 与 普通 8 位 无 符号 整数 数组 的 区 别 : 将 ArrayBuffer 缓存 区 中 的 数值 进行 转换 时 ， 内 部 使 | 
用 箱 位 Clamping) 算法 ， 而 不 是 模 数 (Modulo) 算法 。 | 
ArrayBufferView 对 象 的 作用 : 可 以 根据 同一 个 ArrayBuffer 对 象 创建 各 种 数值 类 型 的 数组 。 | 
【示例 1】 在 下 面 示例 代码 中 ， 根 据 相同 的 ArrayBuffer 对 象 ， 可 以 创建 32 位 的 整数 数组 和 8 位 
的 无 符号 整数 数组 。 
/ 根据 ArrayBuffer 对 象 创建 32 位 整数 数组 
Var arrayl = new Int32Array(Arrayeuffer): 
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/ 根据 同一 个 ArrayBuffer 对 象 创建 8 位 无 符号 整数 数组 
Var array2 = new Uint8Aray(ArrayBuffeD: 


在 创建 ArrayBufferView 对 象 时 ， 除 了 要 指定 ArrayBuffer 缓存 区 外 ， 还 可 以 使 用 下 面 两 个 可 选 


| byteOffset: 为 无 符号 长 整 型 数值 ， 设 置 开始 引用 位 置 与 ArrayBuffer 缓存 区 第 一 个 字 节 之 间 
的 偏离 值 ， 单 位 为 字 节 。 提示， 属性 值 必须 为 数组 中 单个 元 素 的 字 节 长 度 的 倍数 ， 省 略 该 参 
| 数值 时 ，ArrayBufferView 对 象 将 从 ArrayBuffer 缓存 区 的 第 一 个 字 节 开始 引用 。 
| 回 length: 为 无 符号 长 整 型 数值 ， 设 置 数 组 中 元 素 的 个 数 。 如 果 省 略 该 参数 值 ， 将 根据 缓存 区 
| 长 度 、ArrayBufferView 对 象 开 始 引用 的 位 置 、 每 个 元 素 的 字 节 长 度 自动 计算 出 元 素 个 数 。 
| 如 果 设置 了 byteOffset 和 length 参数 值 , 数组 从 byteOffset 参数 值 指定 的 开始 位 置 开 始 , 长 度 为 : 
| length 参数 值 所 指定 的 元 素 个 数 乘 以 每 个 元 素 的 字 节 长 度 。 
| 如 果 忽 略 了 byteOffset 和 length 参数 值 ， 数 组 将 跨越 整个 ArrayBuffer 缓存 区 。 
如 果 省 略 length 参数 值 ,数组 将 从 byteOffset 参数 值 指定 的 开始 位 置 到 ArrayBuffer 缓存 区 的 结束 
位 置 。 
ArrayBufferView 对 象 包含 3 个 属性 。 
buffer: 只 读 属性 ， 表 示 ArrayBuffer 对 象 ， 返回 ArrayBufferView 对 象 引用 的 ArrayBuffer 组 
存 区 。 
byteOffset: 只 读 属性 ， 表 示 一 个 无 符号 长 整 型 数值 ， 返 回 ArrayBufferView 对 象 开始 引用 的 
位 置 与 ArrayBuffer 缓存 区 的 第 一 个 字 节 之 间 的 偏离 值 ， 单 位 为 字 节 。 
length: 只 读 属性 ， 表 示 一 个 无 符号 长 整 型 数值 ， 返 回 数组 中 元 素 的 个 数 。 
【示例 2】 下 面 示例 代码 演示 了 如 何 存 取 ArrayBuffer 缓存 区 中 的 数据 。 
var byte = array2[4]; // 读 取 第 5 个 字 节 的 数据 
array2[4] = 1; / 设置 第 5 个 字 节 的 数据 


18.4.3 ”使 用 DataView 


| 除了 使 用 ArrayBufferView 子 类 外 ， 也 可 以 使 用 DataView 类 存 取 ArrayBuffer 缓存 区 中 的 数据 。 
| DataView 继承 于 ArrayBufferView 类 ， 提 供 了 直接 存 取 ArrayBuffer 缓存 区 中 数据 的 方法 。 
| 创建 DataView 对 象 的 方法 如 下 。 
varview=new DataView(buffer. byteOffset, byteLength): 
| 参数 说 明 如 下 。 
| buffer: 为 ArrayBuffer 对 象 ， 表 示 一 个 ArrayBuffer 缓存 区 。 
| 回 byteOffset: 可 选 参数 ， 为 无 符号 长 整 型 数值 ， 表 示 DataView 对 象 开 始 引 用 的 位 置 与 
| ArrayBuffer 缓存 区 第 一 个 字 节 之 间 的 偏离 值 ， 单 位 为 字 节 。 如 果 忽略 该 参数 值 ， 将 从 
ArrayBuffer 缓存 区 的 第 一 个 字 节 开始 引用 。 
byteLength: 可 选 参数 ， 为 无 符号 长 整 型 数值 ， 表 示 DataView 对 象 的 总 字 节 长 度 。 
如 果 设 置 了 byteOffset 和 byteLength 参数 值 ，DataView 对 象 从 byteOffset 参数 值 所 指定 的 开始 位 
| 置 开始 ,长 度 为 byteLength 参数 值 所 指定 的 总 字 节 长 度 ;如 果 忽 略 了 byteOffset 和 byteLength 参数 值 ， 
| DataView 对 象 跨越 整个 ArrayBuffer 缓 存 区 ; 如 果 省 略 byteLength 参 数值 , DataView 对 象 将 从 byteOffset 
| 参数 所 指定 的 开始 位 置 到 ArrayBuffer 缓存 区 的 结束 位 置 。 
| DataView 对 象 包含 的 方法 说 明 如 表 18.2 所 示 。 


Xx 
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表 18.2 DataView 对 象 方法 


方 法 说 有明 
_getInt8(byteOffset) 获取 指定 位 置 的 一 个 8 位 整数 值 
_getUint8(byteOffeet) 获取 指定 位 置 的 一 个 8 位 无 符号 型 整数 值 


_getIntl6(byteOffeet, littleEndian) 


获取 指定 位 置 的 一 个 16 位 整数 值 


getUintl6(byteOffeet, littleEndian) 
_getUint32(byteOffeet, littleEndian) 


获取 指定 位 置 的 一 个 16 位 无 符号 型 整数 值 
获取 指定 位 置 的 一 个 32 位 无 符号 型 整数 值 


getFloat32(byteOffeet. littleEndian, 
getFloat64(byteOffset. littleEndian, 
setInt8(byteOffaet. Value) 


获取 指定 位 置 的 一 个 32 位 浮 点 数值 
获取 指定 位 置 的 一 个 64 位 浮 点 数值 
设置 指定 位 置 的 一 个 8 位 整数 值 


setUint8(byteOffset. value) 


设置 指定 位 置 的 一 个 8 位 无 符号 型 整数 值 


setIntl6(byteOffset. value. littleEndian) 
setUintl6(byteOffeet, value. littleEndian) 
setUint32(byteOffset, value. littleEndian) 


设置 指定 位 置 的 一 个 16 位 整数 数值 
设置 指定 位 置 的 一 个 16 位 无 符号 型 整数 值 
设置 指定 位 置 的 一 个 32 位 无 符号 型 整数 值 
设置 指定 位 置 的 一 个 32 位 浮 点 数值 


setFloat32(byteOffset. value. littleEndian) 


setFloat64(byteOffset, value., littleEndian) 设置 指定 位 置 的 一 个 64 位 浮 点 数值 


活 提示: 在 上 述 方法 中 ， 各 个 参数 说 明 如 下 。 
byteOffset: 为 一 个 无 符号 长 整 型 数值 ， 表 示 设置 或 读 取 整 数 所 在 位 置 与 DataView 对 
象 对 ArrayBuffer 缓存 区 的 开始 引用 位 置 之 间 相隔 多 少 个 字 节 。 
Value: 为 无 符号 对 应 类 型 的 数值 ， 表 示 在 指定 位 置 进行 设 定 的 整 型 数值 。 
回 litleEndian: 可 选 参数 ， 为 布尔 类 型 ， 判 断 该 整数 数值 的 字 节 序 。 当 值 为 true 时 ， 表 
示 以 little-endian 方式 设置 或 读 取 该 整数 数值 ( 低地 址 存放 最 低 有 效 字 节 ) ; 当 参 数 
值 为 false 或 忽略 该 参数 值 时 ， 表 示 以 big-endian 方式 读 取 该 整数 数值 ( 低地 址 存放 
最 高 有 效 字 节 ) 。 
【示例 】 下 面 示例 演示 了 如 何 使 用 DataView 对 象 的 相关 方法 , 实现 对 文件 数据 进行 截取 和 检测 ， 
演示 效果 如 图 18.10 所 示 。 
<script> 
window.onload = function() { 
Var result = document.getElementById("result"): 
var file = document.getElementById("file"): 
if (typeof FileReader — ‘undefined’) { 
result.innerHTML = "<h1> 当 前 浏览 器 不 支持 FileReader 对 象 <h1>"; 
file.setAttribute('disabled'. 'disabled'): 
} 


} 
function file_ onchangeO { 
var file = document.getElementById("file").files[0]: 
if (WimageV\w+/ .test(file.type)) { 
alert(" 请 选择 一 个 图 像 文件 !"): 
Tetum:;: 
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var slice = file.slice(0.4): 
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| 
| readerreadAsArrayBuffer(slice) 
| Var type: 
全 Teaderonload = function(e) { 
要 Var buffer = this.result: 
var view = new DataView(buffer): 
Var magic = view.getInt32(0.false); 


| 这 magic<0) magic = magic + 0x100000000; 

magic = Imagic.toString(16).toUpperCaseO: 

iftmagic.indexOf(FFD8FF") >=0) 。 type="jpg 文件 "; 

这 magic indexOf89504E47) >=0) type="png 文件 "; 

这 magic indexOfr47494638) >=0) 。 type="gif 文件 "; 
if(magic.indexOf('49492A00') >=0) 。 type="tif 文件" 
if(magic.indexOf('424D') >=0) type="bmp 文件 "; 
document.getElementById("result").innerHTML = ' 文 件 类 型 为 : "+type:; 


(1) 在 上 面 示例 中 ， 先 在 页 面 中 设计 一 个 文件 控件 。 
(2) 当 用 户 在 浏览 器 中 选取 一 个 图 像 文件 后 ，JavaScript 先 检测 文件 类 型 ， 当 为 图 像 文件 后 ， 再 
使 用 File 对 象 的 slice0 方 法 将 该 文件 中 前 4 个 字 节 的 内 容 复 制 到 一 个 Blob 对 象 中 ， 代 码 如 下 所 示 。 
var file=document.getElementById("file").files[0]: 
if (VimageV\w+/.test(file.type)) { 
alert(" 请 选择 一 个 图 像 文件 !"): 
Tetum:; 


} 

| } 

| </script> 

| <input type="file" id="file" onchange="file onchange0" /><br/> 
| <output id="result"></output> 

| De 

| © [© locahost 

| R29 

| 文件 类 型 为 ，jpt 文 件 

图 18.10 “判断 选取 文件 的 类 型 
| 【设计 分 析 】 


| 

| 
Var slice = file.slice(0.4): 

| (3) 新 建 FileReader 对 象 ， 使 用 该 对 象 的 readAsArrayBuffer0 方 法 将 Blob 对 象 中 的 数据 读 取 为 
| 一 个 ArrayBuffsr 对 象 ， 代 码 如 下 。 

| Var reader = new FileReader(): 

| Teader.readAsArrayBuffer(slice): 

| (4) 读 取 ArrayBuffer 对 象 后 ， 使 用 DataView 对 象 读 取 该 ArrayBuffer 缓存 区 中 位 于 开头 位 置 的 
| 一 个 32 位 整数 ， 代 码 如 下 。 


Teaderonload = function(e) { 
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Varbuffer = this.result: 
Var view = new DataView(buffer): 
var magic = view.getInt32(0,false): 


(5) 根据 该 整数 值 判断 用 户 选 取 的 文件 类 型 ， 并 将 文件 类 型 显示 在 页 面 上 。 


这 magic<0) magic = magic + 0x100000000: 

magic = magic.toString(16).toUpperCaseO: 
if(magic.indexOf(FFD8FF') >=0) ”type="jpg 文件 ": 
这 magic indexOfr89504E47) >=0) ”type="png 文件 ": 
if(magic.indexOf('47494638") >=0) type="gif 文件 ": | 
这 magic indexOfr49492A00) >=0) type="tif 文件 ": | 
imagic.indexOf'424D) >=0) 。 type="bmp 文件 "; | 
document.getElementById("result").innerHTML = 文件 类 型 为 : '+type: 


18.5 FileSystem API | 


HTML5 的 FileSystem API 可 以 将 数据 保存 到 本 地 磁盘 的 文件 系统 中 ， 实 现 数据 的 永久 保存 。 
18.5.1 认识 FileSystem API 


FileSystem API 包 括 两 部 分 内 容 : 一 部 分 内 容 为 除 后 台 线程 之 外 的 任何 场合 使 用 的 异步 API; 另 
-部 分 内 容 为 后 台 线程 中 专用 的 同步 API。 本 节 仅 介绍 异步 API 内 容 。 

FileSystem API 具有 如 下 特性 。 

支持 跨 域 通信 ， 但 是 每 个 域 的 文件 系统 只 能 被 该 域 专用 ， 不 能 被 其 他 域 访问 。 

存储 的 数据 是 永久 的 , 不 能 被 浏览 器 随意 删除 , 但 是 存储 在 临时 文件 系统 中 的 数据 可 以 被 浏 
览 器 自行 删除 。 | 

当 Web 应 用 连续 发 出 多 次 对 文件 系统 的 操作 请 求 时 ， 每 一 个 请 求 都 将 得 到 响应 ， 同 时 第 一 | 
个 请 求 中 所 保存 的 数据 可 以 被 之 后 的 请 求 立即 得 到 。 

目前 ， 只 有 Chrome 10+ 版 本 浏览 器 支持 FileSystem API。 


18.5.2 访问 FileSystem 


使 用 window 对 象 的 requestFileSystem() 方 法 可 以 请 求 访问 受到 浏览 器 沙 箱 保护 的 本 地 文件 系统 ，| 视频 讲解 


用 法 如 下 。 | 


window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem: 

window.requestFileSystem(type, size. successCallback. opt_ errorCallback) : 

参数 说 明 如 下 。 

type: 设置 请 求 访问 的 文件 系统 使 用 的 文件 存储 空间 的 类 型 ， 取 值 包 括 window- 
TEMPORARY 和 window.PERSISTENT。 当 值 为 window.TEMPORARY 时 ,表示 请 求 临时 的 
存储 空间 ， 存 储 在 临时 存储 空间 中 的 数据 可 以 被 浏览 器 自行 删除 ， 当 值 为 window. 
PERSISTENT 时 , 表示 请 求 永久 存储 空间 , 存储 在 该 空间 的 数据 不 能 被 浏览 器 在 用 户 不 知情 
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的 情况 下 将 其 清除 ， 只 能 通过 用 户 或 应 用 程序 来 清除 ,请 求 永久 存储 空间 需要 用 户 为 应 用 程 
序 指定 一 定 的 磁盘 配额 。 
size: 设置 请 求 的 文件 系统 使 用 的 文件 存储 空间 的 大 小 ， 尺 寸 为 byte。 

successCallback: 设置 请 求 成 功 时 执行 的 回调 函数 ， 该 回调 函数 的 参数 为 一 个 FileSystem 对 
象 ， 表 示 请 求 访问 的 文件 系统 对 象 。 

opt_errorCallback: 可 选 参数 ， 设 置 请 求 失败 时 执行 的 回调 函数 ， 该 回调 函数 的 参数 为 一 个 
FileError 对 象 ， 其 中 存放 了 请 求 失败 时 的 各 种 信息 。 


FileError 对 象 包 含 code 属性 ， 其 值 为 FileSystem API 中 预定 义 的 常量 值 ， 说 明 如 下 。 
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FileError.QUOTA_EXCEEDED_ERR: 文件 系统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 配额 控制 
中 指定 的 空间 尺寸 。 

FileErrorNOT_ FOUND _ERR: 未 找到 文件 或 目录 。 

FileError.SECURITY_ERR: 操作 不 当 引 起 安全 性 错误 。 
FileError.INVALID_MODIFICATION_ERR: 对 文件 或 目录 所 指定 的 操作 (如 文件 复制 、 删 
除 、 目 录 拷 贝 、 目 录 删 除 等 处 理 ) 不 能 被 执行 。 

FileError.INVALID_STATE_ERR: 指定 的 状态 无 效 。 

FileError. ABORT ERR: 当前 操作 被 终止 。 

FileError. NOT READABLE_ ERR: 指定 的 目录 或 文件 不 可 读 。 

FileError. ENCODING_ERR: 文字 编码 错误 。 

FileError.TYPE_MISMATCH_ERR: 用 户 企 图 访问 目录 或 文件 ， 但 是 用 户 访 问 的 目录 事实 上 
是 一 个 文件 或 用 户 访问 的 文件 事实 上 是 一 个 目录 。 

FileError. PATH _ EXISTS_ERR: 用 户 指定 的 路 径 中 不 存在 需要 访问 的 目录 或 文件 。 


【示例 】 下 面 示例 演示 如 何在 Web 应 用 中 使 用 FileSystem API。 
<script> 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem:; 
Var fs = mull: 
if (window.requestFileSystem) { 


D 


window.requestFileSystem(window. TEMPORARY. 1024*1024. 
function(filesystem) { 


fs = filesystem: 


}. errorHandler); 


function errorHandler(e) { 


switch (e.code) { 


case FileError. QUOTA EXCEEDED ERR: 
console.log(' 文 件 系统 所 使 用 的 存储 空间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 ); 
break: 

case FileError NOT_FOUND ERR: 
console.log(' 未 找到 文件 或 目录 '); 
break: 

case FileError.SECURITY ERR: 
console.log(' 操 作 不 当 引 起 安全 性 错误 ); 
break: 

case FileError. INVALID MODIFICATION ERR: 
console.log(' 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 ): 
break 
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case FileErrorINVALID STATE ERR: 
console log( 指 定 的 状态 无 效 ): 
时 


) 

</script> | 

在 上 面 代码 中 ， 先 判断 浏览 器 是 否 支 持 FileSystem API， 如 果 支 持 则 调用 windowrequestFile System0 ， 
请 求 访问 本 地 文件 系统 ， 如 果 请 求 失败 ， 则 在 控制 台 显示 错误 信息 。 


18.5.3 ”申请 配额 


当 在 磁盘 中 保存 数据 时 ， 首 先 需 要 申请 一 定 的 磁盘 配额 。 在 Chrome 浏览 器 中 ， 可 以 通过 
window.webkitStorageInfo requestQuota() 方 法 向 用 户 计 算 机 申请 磁盘 配额 ， 用 法 如 下 。 
windowwebkitStorageInfo requestQuota(PERSISTENT 1024*1024. 
/ 申请 磁盘 配额 成 功 时 执行 的 回调 函数 
function(grantedBytes) { 
window.requestFilesystem(PERSISTENT. grantedBytes, onInitFs, errorHandler): 


}, 
// 申请 磁盘 配额 失败 时 执行 的 回调 函数 
errorHandler 


) 

该 方法 包含 4 个 参数 ， 说 明 如 下 。 

第 1 个 参数 : 为 TEMPORARY 或 PERSISTENT。 为 TEMPORARY 时 ， 表 示 为 临时 数据 申请 磁 
盘 配 额 ， 为 PERSISTENT 时 ， 表 示 为 永久 数据 申请 磁盘 配额 。 

当 在 用 户 计算 机 中 保存 临时 数据 ,如 果 其 他 磁盘 空间 尺寸 不 足 时 ， 可 能 会 删除 应 用 程序 所 用 磁盘 
配额 中 的 数据 。 在 磁盘 配额 中 保存 数据 后 , 当 浏览 器 被 关闭 或 关闭 计算 机 电源 时 , 这 些 数据 不 会 丢失 。 

第 2 个 参数 :为 整数 值 ,表示 申请 的 磁盘 空间 尺寸 ,单位 为 byte。 上 面 代码 将 参数 值 设 为 1024*1024, | 
表示 向 用 户 计 算 机 申请 1GB 的 磁盘 空间 。 

第 3 个 参数 : 为 一 个 函数 ， 表 示 申 请 磁盘 配额 成 功 时 执行 的 回调 函数 。 在 回调 函数 中 可 以 使 用 一 
个 参数 ， 参 数值 为 申请 成 功 的 磁盘 空间 尺寸 ， 单 位 为 byte。 

第 4 个 参数 :为 一 个 函数 ,表示 申请 磁盘 配额 失败 时 执行 的 回调 函数 , 该 回调 函数 使 用 一 个 参数 ， 
参数 值 为 一 个 FileError 对 象 ， 其 中 存放 申请 磁盘 配额 失败 时 的 各 种 错误 信息 。 | 
容 提示: 当 Web 应 用 首次 申请 磁盘 配额 成 功 后 ， 将 立即 获得 该 磁盘 配额 中 指定 的 磁盘 空间 ， 下 次 | 

使 用 该 磁盘 空间 时 不 需要 再 次 申请 。 


【示例 1】 下 面 示例 演示 如 何 申请 磁盘 配额 。 首 先 在 页 面 中 设计 一 个 文本 框 ， 当 用 户 在 文本 框 控 
件 中 输入 需要 申请 的 磁盘 空间 尺寸 后 ，JavaSeript 向 用 户 申请 磁盘 配额 ， 申 请 磁盘 配额 成 功 后 在 页 面 
中 显示 申请 的 磁盘 空间 尺寸 。 


<scrip> 

function getQuota0 { // 申请 磁盘 配额 
Var size = document.getElementById("capacity").value: 
window.webkitStorageInfo.requestQuota(PERSISTENT.size. 


function(grantedBytes) { / 申请 磁盘 配额 成 功 时 执行 的 回调 函数 
var text = "申请 磁盘 配额 成 功 <br> 磁 盘 配 额 尺寸:" 
Var strBytes.intBytes: 
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if (grantedBytes >= 1024*1024*1024) { 
intBytes = Math floor(grantedBytes/(1024*1024*1024)): 
text += intBytes+"GB "; 
grantedBytes = grantedBytes%(1024*1024*1024): 


} 

if (grantedBytes >= 1024*1024) { 
intBytes = Math.floor(grantedBytes/(1024*1024)): 
text += intBytes+"MB "; 

| grantedBytes = grantedBytes%(1024*1024): 

| 

| 

if (grantedBytes >= 1024) { 
intBytes = Math .floor(grantedBytes/1024): 
text += intBytes+"KB ": 
grantedBytes=grantedBytes%1024:; 

} 


text += grantedBytes+"Bytes"; 
document.getElementById("result").innerHTML = text; 


小 
errorHandler); / 申请 磁盘 配额 失败 时 执行 的 回调 函数 


function errorHandler(e) { 
switch (e.code) { 
case FileError. QUOTA EXCEEDED 
console. joa 文件 录 统 所 佑 用 的 在 信 空 间 的 尺寸 超过 磁盘 限额 控制 中 指定 的 空间 尺寸 ); 


| 
me 
| 


| break: 
| case FileError NOT_FOUND ERR: 
| console log( 未 找到 文件 或 目录 ); 
break: 
case FileError.SECURITY ERR: 
console .log(' 操 作 不 当 引 起 安全 性 错误 ); 


| 
break; 
| case FileError INVALID MODIFICATION ERR: 
| console.log( 对 文件 或 目录 所 指定 的 操作 不 能 被 执行 ”): 


break: 
| case FileError INVALID STATE ERR: 
| console.log(' 指 定 的 状态 无 效 '): 
| 下 
| 本 
</script> 
<form> 


<input type="text" id="capacity" value="1024"> 
| <input type="button" value=" 申 请 磁盘 配额 " onclick="getQuota0"> 
| </form> 
| <output id="result" ></output> 
在 Chrome 浏览 器 中 浏览 页 面 ， 然 后 在 文本 框 控件 中 输入 30000， 单 击 “ 申 请 磁盘 配额 ”按钮 ， 
则 JavaScript 会 自动 计算 出 当前 磁盘 配额 空间 的 大 小 ， 如 图 18.11 所 示 。 


D localhora000/mpsite x 


C [© localhost 


和 
谤 全 配额 尺 十 :29KB 30dBytes 


| 图 18.11 申请 磁盘 配额 
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成 功 申请 磁盘 配额 之 后 , 可 以 使 用 window.webkitStorageInfo.queryUsageAndQuota() 方 法 查询 申请 
的 磁盘 配额 信息 ， 用 法 如 下 。 


window.webkitStorageInfo.queryUsageAndQuota(PERSISTENT., 
/ 获取 磁盘 配额 信息 成 功 时 执行 的 回调 函数 
function(usage.quota) { 
/ 代码 


中 

/ 获取 磁盘 配额 信息 失败 时 执行 的 回调 函数 

errorHandler 
其 | 
该 方法 包含 3 个 参数 ， 说 明 如 下 。 | 

第 1 个 参数 ， 可 选 TEMPORARY 或 PERSISTENT 常量 值 。 为 TEMPORARY 时 ， 表 示 查 询 保存 | 
临时 数据 用 磁盘 配额 信息 ; 为 PERSISTENT 时 ， 表 示 查 询 保存 永久 数据 用 磁盘 配额 信息 。 

第 2 个 参数 : 函数， 表示 查询 磁盘 配额 信息 成 功 时 执行 的 回调 函数 。 在 回调 函数 中 可 以 使 用 两 个 
参数 ， 其 中 第 1 个 参数 为 磁盘 配额 中 已 用 磁盘 空间 尺寸 ,第 2 个 参数 表示 磁盘 配额 所 指定 的 全 部 磁盘 
空间 尺寸 ， 单 位 为 byte。 

第 3 个 参数 : 函数， 表示 查询 磁盘 配额 信息 失败 时 执行 的 回调 函数 。 回 调 函 数 的 参数 为 一 个 
FileError 对 象 ， 其 中 存放 了 查询 磁盘 配额 信息 失败 时 的 各 种 错误 信息 。 

【示例 2】 我 们 看 一 个 查询 磁盘 配额 信息 的 代码 示例 。 设 计 在 页 面 中 显示 一 个 “查询 磁盘 配额 信 
息 ” 按 钮 ， 当 用 户 单 击 该 按钮 时 ， 将 查询 用 户 申请 的 磁盘 配额 信息 。 查 询 成 功 时 将 磁盘 配额 中 用 户 已 
占用 磁盘 空间 尺寸 和 磁盘 配额 的 总 空间 尺寸 显示 在 页 面 中 ， 演 示 效 果 如 图 18.12 所 示 。 

<script> 

function queryQuota0 { // 查询 磁盘 配额 信息 

window.webkitStorageInfo.queryUsageAndQuota(PERSISTENT. 
function(usage,quota) { // 查询 磁盘 配额 信息 成 功 时 执行 的 回调 函数 
vartext= "查询 磁盘 配额 信息 成 功 <br> 已 用 磁盘 空间 :" 
Var strBytes,intBytes; 
if (usage >= 1024*1024*1024) { 
intBytes = Math.floor(usage/(1024*1024*1024)); 
text += intBytes+"GB ": 
Usage = Usage%6(1024*+1024*1024): 


} 

if (usage >= 1024*1024) { 
intBytes=Math.floor(usage/1024*1024): 
text += intBytes+"MB ": 
Usage = usage%1024*1024:; 


} 

if (usage >= 1024) { 
intBytes = Math.floor(usage/1024): 
text += intBytes+"KB "; 
Usage = usage%1024:; 


} 
text += usaget+"Bytes"; 
text += "<br> 磁 盘 配 额 的 总 空间 : ": 
if(quota >= 1024*1024*1024) { 
intBytes = Math.floor(quota/(1024*1024*1024)): 
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text += intBytes+"GB "; 
quota = quota%(1024*1024*1024): 


} 
让 (quota >= 1024*1024) { 
傅 内 | intBytes = Math floor(quota/(1024*1024)): 
| text +=intBytes+"MB ": 
De 
| } 
| 让 (quota >=1024) { 


b 


</script> 


intBytes = Math.floor(quota/1024): 
text += intBytes+"KB "; 
quota = quota%61024: 


小 
errorHandler); // 申请 磁盘 配额 失败 时 执行 的 回调 函数 


fnnction errorHandler(e) { 
// 参考 示例 1 代码 中 errorHandler0) 


<h1> 查 询 磁盘 配额 信息 </h1> 


创建 文件 的 操 
成 功 ， 则 执行 一 个 
件 系统 对 象 包含 一 
请 求 成 功 时 执行 的 


第 1 个 参数 : 
第 2 个 参数 : 

| 取 文件 时 ， 必 须 将 
| 件 ， 如 果 该 文件 已 


| 
| <input type="button" value=" 查 询 磁盘 配额 信息 " onclick="queryQuota0"> 
| <output id="result" ></output> 


© | © locahosta08 


查询 磁盘 配额 信息 


下 河和 本 亲信 息 
查询 夸 熏 配额 信息 成 功 

己 用 磁盘 全 间 :0Bytes 

说 会 配额 的 总 袍 间 ，33EB 742Bytes 


18.12 查询 磁盘 配额 信息 


18.54 新 建文 件 


作 思 路 : 当 用 户 调用 requestFileSystem0 方 法 请 求 访问 本 地 文件 系统 时 ， 如 果 请 求 
回调 函数 ， 这 个 回调 函数 中 包含 一 个 参数 ， 它 指向 可 以 获取 的 文件 系统 对 象 ， 该 文 
个 root 属性 ， 属 性 值 为 一 个 DirectoryEntry 对 象 ， 表 示 文 件 系统 的 根 目录 对 象 。 在 
回调 函数 中 , 可 以 通过 文件 系统 的 根 目录 对 象 的 getFile0 方 法 在 根 目录 中 创建 文件 。 


getFile0 方 法 包含 4 个 参数 ， 简 单 说 明 如 下 。 


为 字符 串 值 ， 表 示 需 要 创建 或 获取 的 文件 名 。 
为 一 个 自 定义 对 象 。 当 创建 文件 时 ， 必 须 将 该 对 象 的 create 属性 值 设 为 tue; 当 获 
该 对 象 的 create 属性 值 设 为 false; 当 创 建文 件 时 ， 如 果 该 文件 已 存在 ， 则 覆盖 该 文 
存在 ， 且 被 使 用 排他 方式 打开 ， 则 抛 出 错误 。 
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第 3 个 参数 : 为 一 个 函数 ， 代 表 获取 文件 或 创建 文件 成 功 时 执行 的 回调 函数 ， 在 回调 函数 中 可 以 | 
使 用 一 个 参数 ， 参 数值 为 一 个 FileEntry 对 象 ， 表 示 成 功 创建 或 获取 的 文件 。 | 
第 4 个 参数 : 为 一 个 函数 ， 代 表 获 取 文件 或 创建 文件 失败 时 执行 的 回调 函数 ， 参 数值 为 一 个 | 
FileBmror 对 象 ， 其 中 存放 了 获取 文件 或 创建 文件 失败 时 的 各 种 错误 信息 。 | 
FileEntry 对 象 表示 受到 沙 箱 保护 的 文件 系统 中 每 一 个 文件 。 该 对 象 包含 如 下 属性 。 | 
isFile: 区 分 对 象 是 否 为 文件 。 属 性 值 为 tue， 表 示 对 象 为 文件 ， 属 性 值 为 false 表示 该 对 象 | Note 
为 目录 。 | 
加 isDireetory。 区 分 对 象 是 否 为 目录 。 属 性 值 为 true， 表 示 对 象 为 目录 ， 属 性 值 为 false， 表 示 | 
该 对 象 为 文件 。 | 
name: 表示 该 文件 的 文件 名 ， 包 括 文件 的 扩展 名 。 | 
fullPath， 表示 该 文件 的 完整 路 径 。 | 
filesystem: 表示 该 文件 所 在 的 文件 系统 对 象 。 
另外 ，FileEntry 对 象 包括 remove()〔 删 除 )、moveToO (移动 )、copyTo0 (拷贝 ) 等 方法 。 
【示例 】 下 面 示例 演示 了 创建 文件 的 基本 方法 。 在 页 面 中 设计 两 个 文本 框 和 一 个 “创建 文件 ” 按 
钮 ， 其 中 一 个 文本 框 控件 用 于 输入 文件 名 ， 另 一 个 文本 框 控件 用 于 输入 文件 大 小 ， 单 位 为 byte， 用 户 
输入 文件 名 及 文件 大 小 后 , 单 击 “ 创 建文 件 ”按钮 ，JavaScript 会 在 文件 系统 中 的 根 目录 下 创建 文件 ， 
并 将 创建 的 文件 信息 显示 在 页 面 中 ， 如 图 18.13 所 示 。 


轿 回 加 


<script> 
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem: 
function createFile() { // 创建 文件 


Var size = document.getElementById("FileSize").value: 
window.requestFileSystem(PERSISTENT, size, 


function(fs) { 1 请 求 文件 系统 成 功 时 所 执行 的 回调 函数 | 
Var filename = document.getElementById("FileName").value; | 
fs.root.getFile( // 创建 文件 | 
filename, | 

{create: true}, 


function(fileEntry) { // 创建 文件 成 功 时 所 执行 的 回调 函数 
var text = "完整 路 径 : "+fileEntryfullPath+"<br>"; 
text+=" 文 件 名 : "+fileEntry.name+"<br>"; 
document.getElementById("result").innerHTML = text: 


) 

emorHandler / 创建 文件 失败 时 所 执行 的 回调 函数 | 

六 | 
emorHandler / 请 求 文件 系统 失败 时 所 执行 的 回调 函数 | 

); | 

} | 
function errorHandler(e) { 1/ 省 略 代码 } | 
script> | 
<h1> 创 建文 件 <hl> | 


文 件 名 : <input type="text" id="FileName" value="test.txt"><br/><br/> 
文件 大 小 : <input type="text" id="FileSize" value="1024"/>Bytes<br/><br/> 
<input type="button" value=" 创 建文 件 " onclick="createFile0"><br/><br/> 
<output id="result" ></output> 
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图 18.13 创建 文件 


”4 前 注意 : 如 果 启 动 系统 ， 初 次 测试 本 例 ， 在 测试 本 节 示 例 之 前 ， 应 先 运行 18.5.2 节 示例 代码 ， 以 便 
| 请 求 访问 受 浏览 器 沙 箱 保护 的 本 地 文件 系统 ,然后 再 运行 18.5.3 节 示例 代码 ， 以 便 申请 磁 
盘 配 额 。 


18.5.5 写 入 数据 


| 
| 
| HTMLS 使 用 FileWriter 和 FileWriterSyne 对 象 执行 文件 写 入 操作 ， 其 中 FileWriterSyne 对 象 用 于 
| 在 后 台 线程 中 进行 文件 的 写 操作 ，FileWriter 对 象 用 于 除 后 台 线 程 之 外 任何 场合 进行 写 操作 。 
在 FileSystem API 中 , 当 使 用 DirectoryEntry 对 象 的 getFile0 方 法 成 功 获取 一 个 文件 对 象 之 后 , 可 以 
在 获取 文件 对 象 成 功 时 所 执行 的 回调 函数 中 ， 利 用 文件 对 象 的 createWriter0 方 法 创建 FileWriter 对 象 。 
createWriter() 方 法 包含 两 个 参数 ， 分 别 为 创建 FileWriter 对 象 成 功 时 执行 的 回调 函数 和 失败 时 执行 
的 回调 函数 。 在 创建 FileWriter 对 象 成 功 时 执行 的 回调 函数 中 , 包含 一 个 参数 , 它 表示 FileWriter 对 象 。 
使 用 FileWrier 对 象 的 write() 方 法 在 获取 到 的 文件 中 写 入 二 进 制 数据 ， 用 法 如 下 。 
fileWiiter write(data): 


国 癌 吕 允 5 回 参数 data 为 一 个 Blob 对 象 ， 表 示 要 写 入 的 二 进 制 数据 。 

使 用 FileWrier 对 象 的 writeend 和 error 事件 可 以 进行 监听 , 在 事件 回调 函数 中 可 
回 以 使 用 一 个 对 象 ， 它 表示 被 触发 的 事件 对 象 。 

线 上 阅读 示例 演示 和 详细 代码 请 扫 码 阅读 。 


18.5.6 添加 数据 
向 文件 添加 数据 与 创建 文件 并 写 入 数据 操作 类 似 ， 区 别 在 于 在 获取 文件 之 后 ， 首 先 需要 使 用 
FileWriter 对 象 的 seek0 方 法 将 文件 读 写 位 置 设置 到 文件 底部 ， 用 法 如 下 。 
fileWriter.seek(fileWriter.length): 
参数 值 为 长 整 型 数值 。 当 值 为 正 值 时 ， 表 示 文 件 读 写 位 置 与 文件 开头 处 之 间 的 
距离 ， 单 位 为 byte《〈 字 节 数 )， 当 值 为 负 值 时 ， 表 示 文 件 读 写 位 置 与 文件 结尾 处 之 间 
的 距离 。 
线 上 阅读 示例 演示 和 详细 代码 请 扫 码 阅读 。 
18.5.7” 读 取 数 据 


| 在 FileSystem API 中 ， 使 用 FileReader 对 象 可 以 读 取 文 件 ， 详 细 介绍 可 以 参考 18.3 节 内 容 。 
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在 文件 对 象 (FileEntry) 的 file0 方 法 中 包含 两 个 参数 ， 分 别 表示 获取 文件 成 功 和 
失败 时 执行 的 回调 函数 ， 在 获取 文件 成 功 时 执行 的 回调 函数 中 ， 可 以 使 用 一 个 参数 ， 
代表 成 功 获取 的 文件 。 

示例 演示 和 详细 代码 请 扫 码 阅读 。 


18.5.8 ”复制 文件 


在 FileSystem API 中 ， 可 以 使 用 File 对 象 引用 磁盘 文件 ， 然 后 将 其 写 入 文件 系统 

fileWriter.write(file); 

参数 file 表示 用 户 磁盘 上 的 一 个 文件 对 象 。 也 可 以 为 一 个 Blob 对 象 , 表示 需要 写 
入 的 二 进 制 数 据 。 在 HIML5 中 ，File 对 象 继 承 Blob 对 象 ， 所 以 在 write0 方 法 中 可 以 
使 用 File 对 象 作为 参数 ， 表 示 使 用 某 个 文件 中 的 原始 数据 进行 写 文件 操作 。 

示例 演示 和 详细 代码 请 扫 码 阅读 。 


18.5.9 删除 文件 


在 FileSystem API 中 ， 使 用 FileEntry 对 象 的 remove0 方 法 可 以 删除 该 文件 。 
remove0 方 法 包含 两 个 参数 ， 分 别 为 删除 文件 成 功 和 失败 时 执行 的 回调 函数 。 
示例 演示 和 详细 代码 请 扫 码 阅读 。 


18.5.10 创建 目录 


在 FileSystem API 中 ，DirectoryEntry 对 象 表示 一 个 目录 ， 该 对 象 包 括 如 下 属性 。 
isFile: 区 分 对 象 是 否 为 文件 。 属 性 值 为 tue， 表 示 对 象 为 文件 ， 属 性 值 为 false， 表 示 该 对 


| 视频 讲解 


象 为 目录 。 
isDirectory: 区 分 对 象 是 否 为 目录 。 属 性 值 为 tue， 表 示 对 象 为 目录 ;属性 值 为 false， 表 示 | 
该 对 象 为 文件 。 


name: 表示 该 目录 的 目录 名 。 

fullPath: 表示 该 目录 的 完整 路 径 。 

filesystem: 表示 该 目录 所 在 的 文件 系统 对 象 。 

DirectoryEntry 对 象 还 包括 一 些 可 以 创建 、 复 制 或 删除 目录 的 方法 。 

使 用 DirectoryEntry 对 象 的 getDirectory() 方 法 可 以 在 一 个 目录 中 创建 或 获取 子 目 录 ， 该 方法 包含 
4 个 参数 ， 简 单 说 明 如 下 。 

第 1 个 参数 : 为 一 个 字符 串 ， 表 示 需 要 创建 或 获取 的 子 目 录 名 。 

第 2 个 参数 : 为 一 个 自 定义 对 象 。 当 创建 目录 时 ， 必 须 将 该 对 象 的 create 属性 值 设 定 为 tue; 当 
获取 目录 时 ， 必 须 将 该 对 象 的 create 属性 值 设 定 为 false。 

第 3 个 参数 : 为 一 个 函数 ， 表 示 获 取 子 目录 或 创建 子 目 录 成 功 时 执行 的 回调 函数 ， 在 回调 函数 中 
可 以 使 用 一 个 参数 ， 参 数 为 一 个 DirectoryEntry 对 象 ， 代 表 创 建 或 获取 成 功 的 子 目录 。 

第 4 个 参数 :为 一 个 函数 ,表示 获取 子 目录 或 创建 子 目 录 失 败 时 执行 的 回调 函数 ， 
参数 值 为 一 个 FileEror 对 象 , 其 中 存放 了 获取 子 目录 或 创建 子 目 录 失 败 时 的 各 种 错误 
信息 。 

示例 演示 和 详细 代码 请 扫 码 阅读 。 
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| 18.5.11 读 取 目 录 


在 FileSystem API 中 ， 读 取 目 录 的 操作 步骤 如 下 。 
(1) 使 用 DirectoryEntry 对 象 的 createReader0 方 法 创建 DirectoryReader 对 象 ， 用 法 如 下 。 


Var dirReader=fs.root.createReader(:; 


| createReader0 方 法 不 包含 任何 参数 ， 返 回 值 为 创建 的 DirectoryEntry 对 象 。 
| (2) 在 创建 DirectoryEntry 对 象 之 后 ， 使 用 该 对 象 的 readEntries() 方 法 读 取 目 录 。 该 方法 包含 两 
个 参数 ， 简 单 说 明 如 下 。 

第 1 个 参数 : 为 读 取 目 录 成 功 时 执行 的 回调 函数 。 回 调 函数 包含 一 个 参数 ， 代 表 被 读 取 的 该 目录 
中 目录 及 文件 的 集合 

第 2 个 参数 : 为 读 取 上 录 失 败 时 执行 的 回调 函数 。 


[DSS (3) 在 异步 FileSystem API 中 ， 不 能 保证 一 次 就 能 读 取出 该 目录 中 的 所 有 目录 
办 。 及 文件 ,应 该 多 次 使 用 readEntries() 方 法 , 直到 回调 函数 的 参数 集合 的 长 度 为 0 为 目 ， 
| 表示 不 再 读 出 目录 或 文件 。 
和 示例 演示 和 详细 代码 请 扫 码 阅读 。 
18.5.12 ”删除 目录 


国 财 宙 入 加 在 FileSystem API 中 ,使 用 DirectoryEntry 对 象 的 remove0 方 法 可 以 删除 该 目录 。 
该 方法 包含 两 个 参数 , 分 别 为 删除 目录 成 功 时 执行 的 回调 函数 和 删除 目录 失败 时 执行 
的 回调 函数 。 当 删除 目录 时 ， 如 果 该 目录 中 含有 文件 或 子 目 录 ， 则 将 抛 出 错误 。 


纺 上 铭记 示例 演示 和 详细 代码 请 扫 码 阅读 。 
18.5.13 ”复制 目录 


在 FileSystem API 中 ， 使 用 FileEntry 对 象 或 DirectoryEntry 对 象 的 copyTo0 方 法 可 以 将 一 个 目录 
中 的 文件 或 子 目 录 复 制 到 另 一 个 目录 中 。 该 方法 包含 4 个 参数 。 
第 1 个 参数 : 为 一 个 DirectoryEntry 对 象 ， 指 定 将 文件 或 目录 复制 到 哪个 目标 目录 中 。 
5 回 ”第 2 个 参数 : 可 选 参数 ， 为 一 个 字符 串 值 ， 用 于 指定 复制 后 的 文件 名 或 目录 名 。 
第 3 个 参数 : 可 选 参数 ， 为 一 个 函数 ， 代 表 复 制 成 功 后 执行 的 回调 函数 。 
第 4 个 参数 : 可 选 参数 ， 为 一 个 函数 ， 代 表 复 制 失败 后 执行 的 回调 函数 。 
线 上 阅读 不 例 演示 和 详细 代码 请 扫 码 阅读 。 


18.5.14 重 命 名 目录 


在 FileSystem API 中 ,使 用 FileEntry 对 象 或 DirectoryEntry 对 象 的 moveTo0 方 法 将 一 个 目录 中 的 
文件 或 子 目 录 复 制 到 另 一 个 目录 中 。 该 方法 所 用 参数 及 其 说 明 与 copyTo0 方 法 完全 相同 。 

两 个 方法 的 不 同 点 : 仅 在 于 使 用 copyTo() 方 法 时 ， 将 把 指定 文件 或 目录 从 复制 源 目录 复制 到 目标 
目录 中 ， 复 制 后 复制 源 目 录 中 该 文件 或 目录 依然 存在 ， 而 使 用 moveTo0 方 法 时 ， 将 把 指定 文件 或 目 
录 从 移动 源 目录 移动 到 目标 目录 中 ， 移 动 后 移动 源 目录 中 该 文件 或 目录 被 删除 。 


你 提示 : 用 户 可 以 在 18.5.13 节 示 例 基础 ， 把 copyTo0 方 法 换 为 moveTo0 方 法 进行 测试 练习 。 
示例 演示 和 详细 代码 请 扫 码 阅读 。 


| 
线 上 阅读 | 
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18.5.15 ”使 用 filesystem:URL 


在 FileSystem API 中 ， 可 以 使 用 带 有 “filesystem:” 前 级 的 URL， 这 种 URL 通常 用 在 页 面 上 元 素 | 
的 href 属性 值 或 sre 属性 值 中 。 | 
用 户 可 以 通过 window 对 象 的 resolveLocalFileSystemURLO 方 法 根据 一 个 带 有 “filesystem:” 前 绥 | 
的 URL 获取 FileEntry 对 象 。 该 方法 包含 3 个 参数 ， 简 单 说 明 如 下 。 ete 
第 1 个 参数 : 为 一 个 带 有 “filesystem: ”前 绥 的 URL。 | 
第 2 个 参数 : 为 一 个 函数 ， 表 示 获 取 文件 对 象 成 功 时 执行 的 回调 函数 ， 该 函数 使 用 一 个 参数 , 表 | 
示 获 取 到 的 文件 对 象 。 | 
第 3 个 参数 ， 为 一 个 函数 ， 表 示 获 取 文件 对 象 失败 时 执行 的 回调 函数 ， 该 回调 函 
数 使 用 一 个 参数 ， 参 数值 为 一 个 FileError 对 象 ， 其 中 存放 获取 文件 对 象 失 败 时 的 各 种 
错误 信息 。 
示例 演示 和 详细 代码 请 扫 码 阅读 。 


18.6 案例 : 设计 资源 管理 器 


本 例 设计 在 页 面 中 显示 一 个 文件 控件 、3 个 按钮 。 当 页 面 打开 时 显示 文件 系统 根 目录 下 的 所 有 文 | 
件 与 目录 , 通过 文件 控件 可 以 将 磁盘 上 一 些 文件 复制 到 文件 系统 的 根 目录 下 ， 复 制 完成 后 用 户 可 以 通 | 
过 单 击 “ 保 存 ” 按 钮 来 重新 显示 文件 系统 根 目录 下 的 所 有 文件 与 目录 ， 单 击 “ 清 空 ”按钮 可 以 删除 文 | 
件 系统 根 目录 下 的 所 有 文件 与 目录 。 | 
具体 代码 解析 请 扫 码 学 习 。 
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第 | 几 章 
案例 实战 


本 章 将 结合 多 个 实战 案例 ， 进 行 JavaScript 强化 训练 ， 为 日 后 的 开发 实习 积累 经 验 。 案 
例 有 类 有 小 ,读者 可 以 根据 实际 情况 和 学 习 兴 趣 有 选择 地 阅读 和 上 机 练习 - 考虑 到 篇 幅 限 制 ， 
我 们 把 本 章 内 容 爹 部 放 在 线 上 ， 供 扫 码 阅读 


【 学 习 重 点 】 
MI 使 用 JavaScript 开发 Web 应 用 程序 
MH 使 用 HIML5+JavaScript 开发 Web 游戏 


19.1 设计 折算 面板 


本 节 案 例 将 设计 一 个 可 折 闪 的 面板 , 折 秋 面板 默认 显示 为 展开 效果 ， 当 使 用 鼠标 单 
击 标题 栏 时 ， 则 折 芝 面板 以 动画 形式 逐步 收 起 内 容 框 ,再 次 单 击 标题 栏 ， 内 容 框 又 会 以 
动画 形式 缓慢 展开 。 详 细 内 容 请 扫 码 阅读 。 


19.2 设计 计算 器 


本 节 设 计 一 个 简单 的 计算 器 ， 该 计算 器 能 够 进行 加 、 减 、 乘 、 除 四 则 运算 ， 以 及 
连续 运算 、 求 余 运 算 。 如 果 发 生 被 除数 为 零 的 错误 ， 会 给 出 错误 提示 。 详 细 内 容 请 扫 
码 阅 读 。 


19.3 设计 上 日 万 


本 例 设计 一 个 既 可 以 查看 公历 , 又 可 以 查看 农历 的 万 年 历 , 并且 在 日 期 的 下 面 显示 
了 公历 与 农历 的 各 个 节日 及 农历 的 节气 。 详 细 内 容 请 扫 码 阅读 。 


19.4 设计 验证 插件 


本 节 通 过 一 个 综合 实例 演示 如 何 使 用 正则 表达 式 设 计 一 个 表单 验证 工具 Validator。 
Validator 是 基于 JavaScript 的 伪 静 态 类 和 对 象 的 自 定义 属性 ， 可 以 对 网 页 中 的 表单 项 输 
入 进行 相应 的 验证 ,允许 同一 页 面 中 同时 验证 多 个 表单 , 熟悉 接口 代码 之 后 也 可 以 对 特 
定 的 表单 项 ， 甚 至 仅仅 是 某 个 字符 串 进行 验证 。 详 细 内 容 请 扫 码 阅读 。 


19.5 设计 俄罗斯 方块 


俄罗斯 方块 的 游戏 界面 比较 简单 ， 游 戏 的 实现 逻辑 也 不 太 复 杂 ， 非 常 适合 作为 
JavaScript 初学 者 作为 进 阶 训练 项 目 。 本 例 采 用 HTMLS5 的 canvas 来 绘制 游戏 界面 ， 用 
Local Storage 来 记录 游戏 状态 。 详 细 内 容 请 扫 码 阅读 。 
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附录 A ECMAScript 6 


ECMAScript 6 是 继 ECMAScript 5 之 后 的 一 次 主要 改进 ， 语 言 规范 由 ECMAScript 
5.1 时 代 的 245 页 扩充 至 600 页 。ECMAScript 6 增添 了 许多 必要 的 特性 ， 如 模块 和 类 ， 
以 及 一 些 实用 特性 , 如 Maps、Sets、Promises、 生 成 器 (Generators ) 等 。 尽管 ECMAScript 
6 做 了 大 量 的 更 新 ， 但 是 它 依旧 完全 向 后 兼容 以 前 的 版 本 ， 标 准 化 委员 会 决定 避免 由 不 
兼容 版 本 语言 导致 的 Web 体验 破碎 。 因 此 所 有 老 代码 都 可 以 正常 运行 ， 整 个 过 渡 也 显 
得 更 为 平滑 。 详 细 内 容 请 扫 码 阅读 。 


附录 B 使 用 SVG 


SVG (Scalable Vector Graphics， 即 可 缩放 矢量 图 形 ) 是 一 种 XML 应 用 ， 简 约 而 不 
简单 ， 可 以 以 一 种 简洁 、 可 移植 的 形式 表示 图 形 信息 ， 具 有 强大 的 矢量 图 形 绘制 及 动态 
交互 功能 ， 并 提供 丰富 的 视觉 效果 。 目 前 ， 在 网 页 设计 中 出 现 越 来 越 多 的 SVG 图 形 ， 
大 多 数 现代 浏览 器 都 能 显示 SVG 图 形 , 并 且 大 多 数 矢 量 绘图 软件 都 能 导出 SVG 图 形 。 
详细 内 容 请 扫 码 阅读 。 


附录 C CORS 通信 


CORS 是 一 个 W3C 标准 , 全 称 是 “ 跨 域 资源 共享 (Cross-origin Resource Sharing)。 
它 人 允许 浏览 器 向 跨 源 服务 器 发 出 XMLHttpRequest 请 求 ， 从 而 克服 了 AJAX 只 能 同 源 使 
用 的 限制 。 详 细 内 容 请 扫 码 阅读 。 
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附录 DD 同 源 策 略 


浏览 器 安全 的 基石 是 “ 同 源 策略 ”(Same-origin Policy)。 很 多 开发 者 都 知道 这 一 
点 ， 但 了 解 得 不 全 面 。 本 附录 详细 介绍 “ 同 源 策略 ”的 各 个 方面 ， 以 及 如 何 规避 它 。 
详细 内 容 请 扫 码 阅读 。 


附录 EE Mutation Observer API 


Mutation Observer API 用 来 监视 DOM 变动 。DOM 的 任何 变动 ， 如 节点 的 增 减 、 
属性 的 变动 、 文 本 内 容 的 变动 ， 这 个 API 都 可 以 得 到 通知 。 详 细 内 容 请 扫 码 阅读 。 


附录 下 JavaScript 编程 风格 


编程 风格 Programming Style》 指 的 是 编写 代码 的 样式 规则 。 不 同 的 程序 员 ， 往 
往 有 不 同 的 编程 风格 。 编 译 器 的 规范 叫 作 语法 规则 “Grammar)， 这 是 程序 员 必须 遵守 
的 ; 而 编译 器 忽略 的 部 分 ， 就 叫 编程 风格 ， 这 是 程序 员 可 以 自由 选择 的 。 但 是 好 的 编 
程 风格 有 助 于 写 出 质量 更 高 、 错 误 更 少 、 更 易于 维护 的 程序 。 详 细 内 容 请 扫 码 阅读 。 
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循序 渐进 ， 实 战 讲述 

297 个 应 用 实例 ，30 小 时 视频 讲解 ， 基 础 知识 一 核心 技术 一 高 级 应 用 一 项 目 实战 
海量 资源 ， 可 查 可 练 

@ 实例 资源 库 © 模块 资源 库 © 项 目 资源 库 

@ 测试 题库 ” © 面试 资源 库 @ PPT 课 件 

(以 《Java 从 入 门 到 精通 (第 5 版 )》 为 例 ) 


和 软件 项 目 开发 全 程 实录 


(CC 语言 PHP 


项 目 开 发 全 得 实录 。 项 目 开发 全 程 实录 


ASP.NET 上 
项 目 开发 全 程 实录 


Ep 
Java Web ic 加 C++ 
项 目 开发 全 程 实录 项 目 开发 全 程 实录 


@ 当前 流行 技术 +10 个 真实 软件 项 目 + 完 整 开发 过 程 
@ 94 集 教学 微 视频 ， 手 机 扫 码 随时 随地 学 习 

@ 160 小 时 在 线 课程 ， 海 量 开发 资源 库 资源 

@ 项 目 开发 快 用 思维 导 图 

(以 《Java 项 目 开发 全 程 实录 《第 4 版 )》 为 例 ) 


